CSS의 background-attachment 속성은 페이지가 뷰포트(viewport)를 기준으로 스크롤될 때 배경 이미지가 어떻게 움직일지를 지정하는 속성입니다. 이 속성은 scroll, fixed, local 세 가지 값을 가질 수 있으며, 각 값에 따라 배경 이미지의 고정 방식이 달라집니다.
기본 문법
CSS background-attachment 속성의 기본 문법은 다음과 같습니다.
선택자 {
background-attachment: /*값*/;
}속성값 설명
- scroll: 기본값으로, 요소와 함께 배경이 스크롤되지만 요소 자체에 대한 배경은 고정됩니다.
- fixed: 뷰포트를 기준으로 배경 이미지가 고정되어, 페이지를 스크롤해도 배경이 움직이지 않습니다.
- local: 요소의 콘텐츠와 함께 배경이 스크롤됩니다.
예제 1: background-attachment: local
다음 예제는 local 값을 적용한 경우입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: local;
background-position: center;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 40px;
margin: 30px;
}
.in {
background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
페이지를 스크롤하면 배경 이미지도 콘텐츠와 함께 아래로 이동합니다.
예제 2: background-attachment: fixed
다음 예제는 fixed 값을 적용한 경우입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 5%;
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg");
}
div {
padding: 80px;
margin: 30px;
border-radius: 4%;
}
.in {
background: rgba(0,40,0,0.4);
}
</style>
</head>
<body>
<div id="one">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
페이지를 스크롤해도 배경 이미지는 뷰포트에 고정된 채 그대로 유지되는 것을 확인할 수 있습니다.
마무리
background-attachment 속성은 웹 페이지에서 패럴랙스(parallax) 효과나 고정 배경 디자인을 구현할 때 매우 유용하게 활용됩니다. 특히 fixed 값은 스크롤과 무관하게 배경을 고정시켜 시각적인 깊이감을 줄 수 있으며, local 값은 스크롤 가능한 영역 내에서 배경이 함께 움직여야 하는 경우에 적합합니다.