CSS 배경 이미지 반복 없이 한 번만 표시하는 방법

CSS의 background-image 속성을 사용해 웹사이트에 이미지를 배경으로 넣으면, 이미지가 화면 전체를 채우기 위해 가로와 세로 방향으로 무한히 반복되는 현상을 경험한 적이 있을 것입니다.

이런 현상이 발생하는 이유는 브라우저의 기본 스타일에서 background-repeat 속성 값이 repeat로 설정되어 있기 때문입니다.

배경 이미지가 반복되지 않도록 하려면 기본값인 repeat를 no-repeat으로 변경해 주면 됩니다. 아래 예시 코드를 참고하세요.

body {
  background-image: url("path-to-image.jpg");
  background-repeat: no-repeat;
}

이제 배경 이미지가 한 번만 표시되는 것을 확인할 수 있습니다.

background-repeat의 다양한 옵션

background-repeat 속성은 상황에 따라 다른 값을 사용할 수도 있습니다.

• repeat: 기본값으로, 이미지가 가로·세로 모두 반복됩니다.
• no-repeat: 이미지가 한 번만 표시되고 반복되지 않습니다.
• repeat-x: 이미지가 가로 방향으로만 반복됩니다.
• repeat-y: 이미지가 세로 방향으로만 반복됩니다.

예를 들어 페이지 상단에 가로 배너 형태의 배경을 넣고 싶다면 repeat-x를 활용하면 유용합니다.