background-repeat

CSS background-repeat 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.

반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(round) 끝에서 끝까지 고르게 분배(space)할 수 있습니다.

구문

/* 키워드 값 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 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;

값

<repeat-style>

한 개 값 구문은 두 개 값 구문의 단축 형태입니다.

한 개 값	두 개 값
`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`

두 개 값 구문의 앞쪽은 가로 반복 방법을, 뒤쪽은 세로 반복 방법을 설정합니다. 각 방법의 동작 방식은 아래 표와 같습니다.

`repeat`	요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다.
`space`	요소가 잘리지 않을 만큼 이미지를 반복합니다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 각 이미지 사이에 남은 여백을 고르게 분배합니다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우가 아니라면 `background-position` (en-US) 속성은 무시합니다. `space`를 사용했는데 이미지가 잘리는 경우는 그 크기가 너무 커서 한 장 조차 넣을 수 없는 경우뿐입니다.
`round`	가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않습니다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 >= 이미지 너비의 절반) 비로소 반복 횟수를 하나 추가합니다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보합니다. 예시: 원래 너비가 260px이고, 세 번 반복된 이미지는 각자 300px 너비가 될 때까지 늘어날 수 있습니다. 그 후에는 이미지를 추가하고, 각자 225px로 줄어듭니다.
`no-repeat`	이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 `background-position` (en-US) CSS속성이 설정합니다.

형식 정의

초기값	`repeat`
적용대상	all elements. It also applies to ::first-letter (en-US) and ::first-line (en-US).
상속	no
Computed value	a list, each item consisting of two keywords, one per dimension
Animation type	discrete

형식 구문

<repeat-style># (en-US)where 
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)

예제

HTML

<ol>
  <li>no-repeat
    <div class="one"></div>
  </li>
  <li>repeat
    <div class="two"></div>
  </li>
  <li>repeat-x
    <div class="three"></div>
  </li>
  <li>repeat-y
    <div class="four"></div>
  </li>
  <li>space
    <div class="five"></div>
  </li>
  <li>round
    <div class="six"></div>
  </li>
  <li>repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 160px;
    height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}

결과

명세

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'background-repeat' in that specification.	Candidate Recommendation	Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the `space` and `round` keywords, and for backgrounds on inline-level elements by precisely defining the background painting area.
CSS Level 2 (Revision 1) The definition of 'background-repeat' in that specification.	Recommendation	No significant changes.
CSS Level 1 The definition of 'background-repeat' in that specification.	Recommendation	Initial definition.

브라우저 호환성

BCD tables only load in the browser

같이 보기

한 번에 여러 배경 사용하기