background-repeat 속성의 이해

background-repeat 속성은 요소에 적용한 배경 이미지의 반복 방식을 지정합니다.

배경 이미지를 가로나 세로 축을 따라 반복하거나 전혀 반복되지 않도록 하거나, 다양한 방식으로 지정할 수 있습니다.

부연설명
background-repeat 속성은 background-image 속성으로 지정한 배경 이미지가 배경 영역보다 작을 때, 배경 영역 내에서 반복 방식을 지정합니다.

CSS 데모: background-repeat 데모 버튼을 클릭해 보세요!

background-repeat 속성의 형식은 다음과 같습니다.

형식 구문

CSS 
selector {
    background-repeat: /* value */
}

구문

CSS background-repeat 속성 값 예시 
/* 한 개 키워드 값 */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 두 개 키워드 값 구문: 가로 축 | 세로 축 */
background-repeat: repeat repeat; /* repeat과 동일 */
background-repeat: no-repeat no-repeat; /* no-repeat과 동일 */
background-repeat: repeat no-repeat; /* repeat-x와 동일 */
background-repeat: no-repeat repeat; /* repeat-y와 동일 */
background-repeat: space space; /* space와 동일 */
background-repeat: round round; /* round와 동일 */
background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

/* 글로벌 값 */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;

값

이 속성은 띄어쓰기로 최대 두 개의 키워드 값을 허용합니다.

  • 첫 번째 값은 가로 축에 대한 반복 방식을 지정합니다.
  • 두 번째 값은 세로 축에 대한 반복 방식을 지정합니다.
  • 한 개 키워드 값만 사용하면 해당 값이 가로와 세로 축 모두에 적용됩니다.
  • repeat-x와 repeat-y는 단축 값이며, 두 축 중 하나의 반복을 미리 정의한 값입니다.
    repeat-x는 repeat no-repeat의 단축 형태
    repeat-y는 no-repeat repeat의 단축 형태
background-repeat 속성 값
repeat
  • 배경 이미지를 해당 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
no-repeat
  • 배경 이미지를 해당 축에서 반복하지 않습니다.
space
  • 배경 이미지를 반복하되, 이미지 사이의 간격을 동일하게 유지합니다.
  • 배경 이미지가 배경 영역에 정확히 맞지 않으면 여백이 균등하게 분배됩니다.
  • 이미지 간의 간격은 늘어나지만, 이미지 자체는 크기가 변하지 않습니다.
  • 배경 이미지는 반복되더라도 배경 영역에 맞게 조정되기 때문에 영역을 초과하여 잘리거나 클리핑(오래냄. clipping)되지 않습니다.
round
  • 배경 이미지를 반복하되, 이미지의 크기를 조정하여 배경 영역을 정확히 채웁니다.
  • 배경 이미지의 크기가 조금씩 늘어나거나 줄어들 수 있습니다.
repeat-x
  • 배경 이미지를 가로 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
  • repeat no-repeat의 단축 형태입니다.
  • 배경 이미지는 반복되더라도 배경 영역에 맞게 조정되기 때문에 영역을 초과하여 잘리거나 클리핑(오래냄. clipping)되지 않습니다.
repeat-y
  • 배경 이미지를 세로 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
  • no-repeat repeat의 단축 형태입니다.

한 개의 키워드 값만 있으면 해당 값은 다음 두 개의 키워드 값 구문의 단축 형태입니다.

한 개의 키워드 값두 개의 키워드 값
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat

형식 정의

background-repeat 속성의 형식 정의
초깃값 repeat
적용 요소 모든 요소
상속 아니오
애니메이션 아니오

예제

다음의 예제들을 통해서 background-repeat 속성의 사용법에 대해 살펴보겠습니다.

예제에 사용할 공통 HTML 
<div></div>
예제에 사용할 공통 CSS 
div {
    height: 200px;
    background-color: #f3f5f6;
    background-image: url("star.jpg");
    border: 1px solid;
}

background-repeat: repeat

CSS 
background-repeat: repeat;
/* background-repeat: repeat repeat;과 동일 */
  • 배경 이미지를 해당 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
실제 적용된 모습

background-repeat: no-repeat

CSS 
background-repeat: no-repeat;
/* background-repeat: no-repeat no-repeat;과 동일 */
  • 배경 이미지를 해당 축에서 반복하지 않습니다.
실제 적용된 모습

background-repeat: repeat-x

CSS 
background-repeat: repeat-x;
/* background-repeat: repeat no-repeat;과 동일 */
  • 배경 이미지를 가로 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
  • repeat no-repeat의 단축 형태입니다.
실제 적용된 모습

background-repeat: repeat-y

CSS 
background-repeat: repeat-y;
/* background-repeat: no-repeat repeat;과 동일 */
  • 배경 이미지를 세로 축에서 반복합니다.
  • 배경 이미지가 배경 영역을 채울 때까지 반복됩니다. 마지막 반복 이미지가 넘칠 경우 클리핑(오려냄, clipping)됩니다.
  • no-repeat repeat의 단축 형태입니다.
실제 적용된 모습

background-repeat: space

CSS 
background-repeat: space;
/* background-repeat: space space;와 동일 */
  • 배경 이미지를 반복하되, 이미지 사이의 간격을 동일하게 유지합니다.
  • 배경 이미지가 배경 영역에 정확히 맞지 않으면 여백이 균등하게 분배됩니다.
  • 이미지 간의 간격은 늘어나지만, 이미지 자체는 크기가 변하지 않습니다.
  • 배경 이미지는 반복되더라도 배경 영역에 맞게 조정되기 때문에 영역을 초과하여 잘리거나 클리핑(오래냄. clipping)되지 않습니다.
실제 적용된 모습

background-repeat: round

CSS 
background-repeat: round;
/* background-repeat: round round;와 동일 */
  • 배경 이미지를 반복하되, 이미지의 크기를 조정하여 배경 영역을 정확히 채웁니다.
  • 배경 이미지의 크기가 조금씩 늘어나거나 줄어들 수 있습니다.
  • 배경 이미지는 반복되더라도 배경 영역에 맞게 조정되기 때문에 영역을 초과하여 잘리거나 클리핑(오래냄. clipping)되지 않습니다.
실제 적용된 모습

브라우저 호환성

background-repeat 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background-repeat 1 12 1 1
두 개의 키워드 값 3 12 13 5
no-repeat 1 12 1 1
repeat 1 12 1 1
repeat-x 1 12 1 1
repeat-y 1 12 1 1
round 30 12 49 8
space 30 12 49 8

명세서

background-repeat 속성의 명세서 사양
명세서 사양
background-repeat CSS Backgrounds and Borders Module Level 3
#the-background-repeat

참고문헌

같이 보기