background-postion 속성을 이용해 배경 이미지를 배치할 때 기준이 필요합니다. 배경 이미지를 배치할 기준은 background-origin 속성으로 지정합니다.
background-origin
background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다.
기본형
background-origin : border-box | padding-box | content-box
- border-box : 테두리 영역 왼쪽 위부터 채웁니다.
- padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
- content-box : 내용 영역 왼쪽 위부터 채웁니다.
예제
다음은 속성 값에 따라 배경 이미지가 어디서부터 채우는지 확인하는 예제입니다.
border-box
- 배경 이미지를 테두리 영역 왼쪽 위부터 채웁니다.
<p>background-origin: border-box;</p>
<div class="box">배경 이미지가 테두리부터 시작됩니다.</div>
p {
text-align: center;
}
.box {
box-sizing: border-box;
color: skyblue;
width: 100%;
height: 150px;
padding: 20px;
border: 20px double #dddddd;
background-image: url("https://bit.ly/2HU6Ozp");
background-repeat: no-repeat;
background-origin: border-box;
}
padding-box
- 배경 이미지를 안쪽 여백 영역 왼쪽 위부터 채웁니다.
<p>background-origin: padding-box;</p>
<div class="box">배경 이미지가 패딩 영역부터 시작됩니다.</div>
p {
text-align: center;
}
.box {
box-sizing: border-box;
color: skyblue;
width: 100%;
height: 150px;
padding: 20px;
border: 20px double #dddddd;
background-image: url("https://bit.ly/2HU6Ozp");
background-repeat: no-repeat;
background-origin: padding-box;
}
content-box
- 배경 이미지를 내용 영역 왼쪽 위부터 채웁니다.
<p>background-origin: content-box;</p>
<div class="box">배경 이미지가 콘텐츠 영역부터 시작됩니다.</div>
p {
text-align: center;
}
.box {
box-sizing: border-box;
color: skyblue;
width: 100%;
height: 150px;
padding: 20px;
border: 20px double #dddddd;
background-image: url("https://bit.ly/2HU6Ozp");
background-repeat: no-repeat;
background-origin: content-box;
}