CSS background-repeat 속성

❮ 이전 완전한 CSS 참조 다음 ❯

예시

배경 이미지를 세로로만 반복합니다.

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

속성 은 background-repeat배경 이미지가 반복되는지 여부를 설정합니다.

기본적으로 배경 이미지 는 세로 및 가로로 반복됩니다.

팁: 배경 이미지는 background-position 속성에 따라 배치됩니다. background-position이 지정되지 않으면 이미지는 항상 요소의 왼쪽 상단 모서리에 배치됩니다.

기본값:	반복하다
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS1
자바스크립트 구문:	개체 .style.backgroundRepeat="반복-x"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

참고: IE8 및 이전 버전은 한 요소에 여러 배경 이미지를 지원하지 않습니다.

CSS 구문

속성 값

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

세로 및 가로로 배경 이미지를 반복합니다(기본값).

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

예시

배경 이미지를 가로로만 반복:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

예시

배경 이미지를 반복하지 마십시오. 이미지는 한 번만 표시됩니다.

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

예시

background-repeat: space 및 background-repeat: round 사용:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

예시

다양한 배경 속성을 사용하여 "영웅" 이미지 생성:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

CSS 참조

CSS Properties