CSS에서 배경 이미지가 페이지 전체에 반복되지 않고 한 번만 표시되도록 하려면 background-repeat 속성을 사용합니다. 이 속성에 no-repeat 값을 지정하면 배경 이미지가 요소 안에서 단 한 번만 나타나며, 남은 공간은 배경색으로 채워집니다.
background-repeat의 주요 값
- repeat(기본값): 이미지가 가로·세로 방향으로 반복됩니다.
- no-repeat: 이미지가 반복되지 않고 한 번만 표시됩니다.
- repeat-x: 이미지가 가로 방향으로만 반복됩니다.
- repeat-y: 이미지가 세로 방향으로만 반복됩니다.
예제 코드
아래 예제는 background-repeat: no-repeat;를 적용하여 배경 이미지를 한 번만 표시하는 방법을 보여줍니다. 코드를 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Background Image</h1>
</body>
</html>추가 팁
no-repeat와 함께 background-position 속성을 사용하면 이미지가 표시되는 위치를 조정할 수 있습니다. 예를 들어 background-position: center;를 추가하면 배경 이미지가 화면 중앙에 정렬되어 더 깔끔한 디자인을 만들 수 있습니다.