CSS background-repeat 이해하기

background-repeat 속성은 배경(백그라운드) 이미지가 어떻게 반복될지를 설정한다. 배경 이미지는 가로로 반복될 수 있고, 세로로 반복될 수도 있으며, 가로와 세로 모두 반복되거나, 반복되지 않도록 설정할 수도 있다.

! 아래의 예들은 실제 background-repeat이 적용된 것이다. (RSS 피드에서는 아래의 스타일 설정이 보이지 않을 수 있음.)

background-repeat 속성의 값들

• repeat - 배경 이미지가 가로(수평)와 세로(수직) 모두 반복된다. repeat는 기본(default)값이다. 즉, 따로 설정하지 않는 이상, 배경 이미지는 기본적으로 반복된다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat;  

• repeat-x - 배경 이미지가 가로(수평)로만 반복된다. 

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat-x;  

• repeat-y - 배경 이미지가 세로(수직)로만 반복된다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: repeat-y;  

• no-repeat - 배경 이미지가 반복되지 않는다.

예 :

 background-image: url("이미지 주소");  
 background-repeat: no-repeat;  

• inherit - 배경 이미지 반복 여부 설정을 상위(부모) 요소로부터 물려받는다.

! 참고할 만한 글
CSS background-repeat Property (w3schools.com)
background-repeat (Mozilla Developer Network)


! 이 글에 사용된 배경 이미지는 재배포 금지와 출처 표기를 조건으로 상업적인 용도로 사용이 가능한, medialoot 의 무료 아이콘입니다.