background-repeat 속성
background-repeat 속성은
요소의 배경 이미지를 어떤 방식으로 반복할지
지정합니다. 기본적으로 이미지는 X축과 Y축 모두에서
반복되며, 이로 인해 사용 가능한 전체 영역을
덮게 됩니다.
구문
선택자 {
background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}
값
| 값 | 설명 |
|---|---|
no-repeat |
이미지는 전혀 반복되지 않습니다. |
repeat-x |
이미지는 X축을 따라 반복됩니다. |
repeat-y |
이미지는 Y축을 따라 반복됩니다. |
repeat |
이미지는 X축과 Y축 모두를 따라 반복됩니다. |
space |
영역을 완전히 채울 수 있을 만큼 이미지가 반복되며, 이를 달성할 수 없는 경우 이미지 사이에 빈 공간이 추가됩니다. |
round |
영역에 정수 개의 이미지가 들어가도록 반복되며, 이를 달성할 수 없는 경우 배경 이미지의 크기가 조정됩니다. |
기본값: repeat - 전체 화면을 패턴으로 덮습니다.
예제
기본적으로 배경 이미지는 요소 전체를 타일처럼 채웁니다:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
이미지가 반복되지 않도록 만들어 봅시다:
<div id="elem"></div>
#elem {
background-repeat: no-repeat;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
이번에는 이미지가 X축을 따라 반복되도록 해봅시다:
<div id="elem"></div>
#elem {
background-repeat: repeat-x;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
이번에는 Y축을 따라 반복되도록 해봅시다:
<div id="elem"></div>
#elem {
background-repeat: repeat-y;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
축을 따라 반복되는 이미지는 background-position
속성을 사용하여 위치를 지정할 수 있습니다:
<div id="elem"></div>
#elem {
background-repeat: repeat-y;
background-position: top center;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
space 값이 어떻게 작동하는지 살펴봅시다:
<div id="elem"></div>
#elem {
background-repeat: space;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
예제
round 값이 어떻게 작동하는지 살펴봅시다:
<div id="elem"></div>
#elem {
background-repeat: round;
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 1px solid black;
}
:
함께 보기
-
배경에 대한 단축 속성인
background속성