예
세로 방향으로 만 배경 이미지를 반복합니다 :
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
배경 이미지가 반복되는 방법 / 경우 배경 반복 속성을 설정합니다.
기본적으로, 배경 이미지는 모두 수직 및 수평으로 반복된다.
Tip: 배경 이미지가 배경 위치 특성에 따라 배치됩니다. 어떠한 배경 위치가 지정되지 않은 경우, 이미지는 항상 소자의 상부 좌측 코너에 배치된다.
| 기본값: | repeat |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS1 |
| 자바 스크립트 구문 : | object .style.backgroundRepeat="repeat-x" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 및 이전 하나의 요소에 여러 개의 배경 이미지를 지원하지 않습니다.
CSS 구문
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| repeat | 배경 이미지는 모두 수직 및 수평으로 반복 될 것이다. 이 기본이다 | »플레이 |
| repeat-x | 배경 이미지는 수평으로 반복됩니다 | »플레이 |
| repeat-y | 배경 이미지는 수직으로 반복됩니다 | »플레이 |
| no-repeat | 배경 이미지는 반복하지 않는다 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
어떻게 모두 수직 및 수평 배경 이미지를 반복하기 (배경 이미지에 대한 기본값) :
body
{
background-image: url("paper.gif");
}
»그것을 자신을 시도 예
만 가로 배경 이미지를 반복합니다 :
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
»그것을 자신을 시도 예
노를 반복하여, 배경 이미지를 한 번만 표시 :
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 배경
CSS 참조 : 배경 위치 속성
HTML DOM 참조 : backgroundRepeat property