○ background-origin : 배경 이미지 적용 범위
배경 이미지를 박스 모델 안에 적용하게 될 때, 해당 박스 모델에 패딩이 있거나 테두리까지 적용할지 결정할 수 있습니다. background-clip 속성에서 적용했던 속성 값과 비슷한 기능을 떠올리시면 됩니다. background-origin 속성 값은 다음 세 개의 종류로 구분됩니다.
· content-box : 기본값이며, 패딩과 테두리를 제외한 콘텐츠 부분에만 배경 이미지를 표시합니다.
· padding-box : 패딩까지 배경 이미지를 표시합니다.
· border-box : 테두리까지 배경 이미지를 표시합니다.
○ background-attachment 속성
기본적으로 어떤 HTML 문서에서 스크롤을 조절하면, 해당 문서에 적용된 배경 이미지도 함께 움직이게 됩니다. 이때 background-attachment 속성을 이용해 배경 이미지를 고정할 수 있습니다.
· scroll : 기본값이며, 화면을 스크롤하면 배경도 같이 움직입니다.
· fixed : 화면을 스크롤해도 배경 이미지는 고정되며, 내용만 움직이게 됩니다.
위 background-origin과 background-attachment 속성을 적용한 예제를 함께 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
body {
background-image: url('images/255_CSS3_logo.png');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
div {
width: 500px;
height: 250px;
padding: 20px;
border: 25px solid rgba(204, 204, 204, 0.5);
margin-bottom: 30px;
overflow: auto;
background-image: url('images/100_square.jpg');
background-repeat: no-repeat;
background-position: right top;
}
#bg1 {
background-origin: padding-box;
}
#bg2 {
background-origin: border-box;
}
#bg3 {
background-origin: content-box;
}
</style>
</head>
<body>
<div id="bg1">
<h2>패딩 박스</h2>
<h3>패딩 라인까지 적용</h3>
<p>background-origin을 padding-box로 적용하여 표현하였습니다.</p>
</div>
<div id="bg2">
<h2>보더 박스</h2>
<h3>테두리 라인까지 적용</h3>
<p>background-origin을 border-box로 적용하여 표현하였습니다.</p>
</div>
<div id="bg3">
<h2>콘텐츠 박스</h2>
<h3>콘텐츠 내부까지 적용</h3>
<p>background-origin을 content-box로 적용하여 표현하였습니다.</p>
</div>
</body>
</html>
위 예제에서 스크롤을 움직여도 우측 상단의 로고 이미지는 배경으로 fixed 상태로 적용되어 움직이지 않습니다. 그리고 박스 내부에 배경 이미지로 적용된 사각형의 그림도 패딩, 테두리, 콘텐츠 영역에 각각 배치되어 있는 것을 확인할 수 있습니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 (0) | 2023.05.10 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 (0) | 2023.05.09 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 2 (0) | 2023.05.04 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 1 (0) | 2023.05.03 |
| [CSS] 5. 배경 이미지와 그라데이션(1) - background color & clip (0) | 2023.05.01 |
