CSS에서 배경 이미지의 스크롤 동작을 제어하려면 background-attachment 속성을 사용합니다.
background-attachment 속성이란?
background-attachment 속성은 페이지를 스크롤할 때 배경 이미지가 어떻게 움직일지 결정합니다. 주요 값은 다음과 같습니다.
- scroll (기본값): 페이지와 함께 배경 이미지도 스크롤됩니다.
- fixed: 페이지를 스크롤해도 배경 이미지는 화면에 고정된 상태로 유지됩니다.
- local: 요소의 내용과 함께 배경 이미지가 스크롤됩니다.
예제 코드
아래 코드를 실행하여 background-attachment 속성이 실제로 어떻게 작동하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
<p>배경 이미지가 고정되어 있습니다. 페이지를 아래로 스크롤해 보세요.</p>
</body>
</html>동작 방식 설명
위 예제에서는 background-attachment: fixed;가 적용되어 있기 때문에, 페이지를 아무리 스크롤해도 배경 이미지는 화면상에서 제자리에 고정됩니다. 만약 이 값을 scroll로 변경하면 배경 이미지가 콘텐츠와 함께 위아래로 움직이는 것을 확인할 수 있습니다.
참고로 원본 예제에는 fixed와 scroll 두 값이 연속으로 선언되어 있었는데, CSS에서는 나중에 선언된 값이 우선 적용되므로 의도한 대로 작동하지 않을 수 있습니다. 하나의 값만 사용하는 것이 좋습니다.