background-repeat
background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
background-repeat
background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
| 특징 | 설명 |
|---|---|
| 기본 값 | background-repeat : repeat |
| 적용 | background |
| 버전 | CSS1 |
| 사용성 | ★★★★★ |
정의(Definition)
- background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
백그라운드와 관련된 속성(Background Related Properties)
- background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
- background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
- background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
- background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-color 속성은 백그라운드 색을 설정합니다.
- background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다.
- background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
- background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다.
- background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다.
- background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
문법(Syntax)
background-repeat : repeat | repeat-x | repeat-y | no-repeat | space | round
/* 키워드 속성 */
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
background-repeat : space;
background-repeat : round;
속성(Property)
| 속성값 | 설명 |
|---|---|
| repeat | 배경 이미지의 x축과 y축으로 반복설정합니다. |
| repeat-x | 배경 이미지의 x축으로 반복 설정합니다. |
| repeat-y | 배경 이미지의 y축으로 반복 설정합니다 |
| no-repeat | 배경 이미지의 반복하지 않습니다. 이미지가 한번만 나옵니다. |
| space | 이미지가 잘리지 않을 만큼 반복되며 여백이 생깁니다. |
| round | 여백 없이 이미지가 반복됩니다. |
예제1(Sample)
백그라운드 이미지 반복 여부를 설정하는 예제입니다.
background-repeat : repeat
background-repeat : repeat-x;
background-repeat : repeat-y
background-repeat : no-repeat;
background-repeat : space;
background-repeat : round;
HTML
CSS
SCRIPT
<div class="background-box"></div>
.background-box {
background-image: url(../images/hover18.jpg);
background-repeat: repeat;
background-size: 30%;
height: 400px;
}
//Javascript none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| background-repeat | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
