CSS에서 background-image 속성을 사용하면 이미지를 화면 전체에 걸쳐 가로와 세로 방향으로 동시에 반복시킬 수 있습니다. 기본적으로 배경 이미지는 background-repeat 속성의 초기값이 repeat이기 때문에, 별도의 추가 설정 없이도 요소 영역 전체에 타일 형태로 채워집니다.
핵심 포인트
- background-image: 배경으로 사용할 이미지 파일의 경로(url)를 지정합니다.
- background-repeat: repeat; 기본값으로, 이미지가 가로와 세로 양방향으로 반복됩니다.
- 반복 방향을 제어하고 싶다면 repeat-x(가로만), repeat-y(세로만), no-repeat(반복 없음) 값을 사용할 수 있습니다.
예제 코드
아래 예제는 body 요소에 배경 이미지를 적용하여 화면 전체에 가로·세로로 반복되게 하는 코드입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>배경 이미지</h1>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 지정한 이미지가 페이지 전체에 걸쳐 격자 모양으로 반복되어 표시되는 것을 확인할 수 있습니다. 패턴 배경이나 텍스처 효과를 만들 때 유용하게 활용할 수 있습니다.