[CSS] background-repeat

background-repeat

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

 

• repeat : 요소의 배경 영역을 채울 때까지 이미지를 반복한다. 마지막 반복 이미지가 넘칠 경우 잘라낸다. 기본값.
• repeat-x : x축 방향으로 이미지를 반복한다.(수평)
• repeat-y : y축 방향으로 이미지를 반복한다.(수직)
• no-repeat : 반복없이 이미지를 한 번만 보여준다.
• space : 잘리지 않을 만큼 이미지를 반복한다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 그 이미지 사이에 남은 여백을 고르게 분배한다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우를 제외하고 background-position (en-US) 속성은 무시한다. space에서 이미지가 잘리는 경우는 크기가 너무 커서 한 장 조차 넣을 수 없는 경우이다.
• round : 가용 영역이 늘어나면 반복한 이미지도 함께 늘어나 여백을 남기지 않는다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 >= 이미지 너비의 절반) 반복 횟수를 하나 추가한다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보한다.
• no-repeat: 이미지를 반복하지 않는다.

 

 

 

아래처럼 2개 값을 줄 수도 있다.

/* 2개 값 구문: 가로 | 세로 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* 전역 값 */
background-repeat: inherit;
background-repeat: initial;
background-repeat: unset;

 

아래 문서에 자세히 설명돼 있어서 참고하면 좋다.

CSS Demo로 직접 적용해볼 수도 있다.

developer.mozilla.org/ko/docs/Web/CSS/background-repeat

background-repeat - CSS: Cascading Style Sheets | MDN