backgroundAttachment 속성은 배경 이미지가 페이지 콘텐츠와 함께 스크롤될지 여부를 설정하거나 가져오는 데 사용되는 CSS/DOM 속성입니다. 웹 페이지에서 배경 이미지를 고정하거나 콘텐츠 흐름에 따라 움직이게 만들고 싶을 때 유용하게 활용할 수 있습니다.
문법(Syntax)
backgroundAttachment 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"
속성 값(Value)
backgroundAttachment 속성에 사용할 수 있는 값은 아래 표와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | scroll 기본값으로, 배경 이미지가 요소의 내용과 함께 스크롤됩니다. |
| 2 | fixed 배경 이미지가 뷰포트(viewport)를 기준으로 고정되어, 화면이 스크롤되어도 위치가 변하지 않습니다. |
| 3 | local 배경 이미지가 해당 요소의 콘텐츠와 함께 스크롤됩니다. |
| 4 | initial 이 속성을 기본(initial) 값으로 설정합니다. |
| 5 | inherit 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음은 backgroundAttachment 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 배경 첨부 방식이 fixed에서 local로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/artificial_intelligence_with_python/images/artificialintelligence-with-python-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
}
article {
color: white;
background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
function changeAttachment(){
document.getElementById("BODY1").style.backgroundAttachment="local";
document.getElementById("Sample").innerHTML="이제 배경이 페이지와 함께 스크롤됩니다.";
}
</script>
</head>
<body id="BODY1">
<h2>데모 제목입니다</h2>
<p>Curabitur tincidunt elit libero, sed ullamcorper urna ullamcorper ut.
Nulla scelerisque, quam in efficitur porta, nisi turpis blandit odio, vitae ultricies lectus ex vel felis.
Proin lectus nulla, cursus vitae massa ac, mollis gravida orci. Cras euismod imperdiet elit, aliquet placerat purus bibendum vel.
Nullam vehicula urna non ullamcorper congue. Etiam volutpat gravida tempus. Fusce non volutpat diam.
Nullam sagittis condimentum dui, a pharetra mi commodo nec. Cras vulputate hendrerit ornare.
Sed id ligula sit amet arcu dapibus molestie nec at risus.
Aliquam gravida, dolor non vehicula lobortis, augue erat gravida metus, id eleifend ante risus vel turpis.
Nunc fermentum scelerisque nulla, non gravida dui consequat malesuada. Pellentesque mollis scelerisque quam ac efficitur.
Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p> Vivamus eget nisi eu libero viverra vestibulum. Nulla luctus ultrices metus, nec dapibus magna dignissim eget. Ut sed posuere erat.</p>
<p>Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<p>Pellentesque vitae est eget est tempus pretium.
Phasellus semper erat efficitur justo tristique sollicitudin.
Morbi mi eros, aliquet ac gravida ac, tempor et ante. </p>
<p>Aenean non justo non lorem accumsan fermentum efficitur at quam.
Morbi rhoncus lacus sed est luctus, a hendrerit est ullamcorper.
Etiam quis nisl non sem fringilla ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec ac malesuada turpis. Donec dapibus diam metus, nec blandit tellus vulputate quis.</p>
<p>Donec blandit tincidunt ante, sed blandit massa volutpat eu. Mauris ac porta lectus, et vulputate ante.</p>
<p>아래 버튼을 클릭하여 배경 첨부(attachment) 값을 변경해 보세요.</p>
<button onclick="changeAttachment()">CHANGE ATTACHMENT</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE ATTACHMENT 버튼을 클릭하면 배경 이미지가 상단에 고정되어, 페이지를 아래로 스크롤한 후에는 하단에서 더 이상 보이지 않게 됩니다.
