배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다. 이때 background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수 있고 반복하더라도 가로 반복이나 세로 반복 등으로 반복 방향을 지정할 수도 있습니다.
background-repeat
background-repeat는 배경 이미지의 반복을 정하는 속성입니다.
기본형
background-repeat: repeat | repeat-x | repeat-y | no-repeat
- repeat : 가로 방향, 세로 방향으로 반복합니다.
- repeat-x : 가로 방향으로 반복합니다.
- repeat-y : 세로 방향으로 반복합니다.
- no-repeat : 반복하지 않습니다.
예제
repeat
<p>background-repeat: repeat;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/3l02sot");
background-repeat: repeat;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
repeat-x
<p>background-repeat: repeat-x;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/3l02sot");
background-repeat: repeat-x;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
repeat-y
<p>background-repeat: repeat-y;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/3l02sot");
background-repeat: repeat-y;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
no-repeat
<p>background-repeat: no-repeat;</p>
<div class="box"></div>
body {
text-align: center;
}
.box {
width: 100%;
height: 250px;
border: 1px solid #bcbcbc;
background-image: url("https://bit.ly/3l02sot");
background-repeat: no-repeat;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.