CSS background-repeat 속성
정의 및 사용법
background-repeat 배경 이미지가 어떻게 반복되는지 및 속성 설정에 대한 설명
기본적으로, 배경 이미지는 수평 및 수직 방향으로 반복됩니다.
상세 설명
background-repeat 속성이 이미지의 타일링 모드를 정의합니다.
원본 이미지에서 시작하여 반복되며, 원본 이미지는 background-image 정의하고, background-position 의 값을 배치합니다.
다른 참조:
CSS 교육:CSS 배경
CSS 참조 가이드:background-position 속성
HTML DOM 참조 가이드:backgroundRepeat 속성
추천 및 주석
추천:배경 이미지의 위치는 background-position 속성에 의해 설정됩니다. background-position 속성이 지정되지 않으면, 이미지는 요소의 왼쪽 상단에 배치됩니다.
CSS 문법
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
속성 값
속성 값
| 값 | 설명 |
|---|---|
| repeat | 기본. 배경 이미지는 수직 및 수평 방향으로 반복됩니다. |
| repeat-x | 배경 이미지는 수평 방향으로 반복됩니다. |
| repeat-y | 배경 이미지는 수직 방향으로 반복됩니다. |
| no-repeat | 배경 이미지는 한 번만 표시됩니다. |
| inherit | 부모 요소에서 background-repeat 속성 설정을 상속해야 합니다. |
기술 세부 사항
| 기본 값: | repeat |
|---|---|
| 상속성: | no |
| 버전: | CSS1 |
| JavaScript 문법: | object.style.backgroundRepeat="repeat-y" |
더 많은 예제
- 배경 이미지를 수직 방향으로 반복하는 방법
- 이 예제에서 배경 이미지를 수직으로 반복하는 방법을 보여줍니다.
- 배경 이미지를 수평 방향으로 반복하는 방법
- 이 예제에서 배경 이미지를 수평으로 반복하는 방법을 보여줍니다.
- 배경 이미지를 한 번만 표시하는 방법
- 이 예제에서 배경 이미지를 한 번만 표시하는 방법을 보여줍니다.
브라우저 지원
표格에 기재된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
