웹 페이지에서 스크롤을 내려도 배경 이미지가 화면에 그대로 고정되어 있도록 만들고 싶다면 background-attachment 속성을 사용하면 됩니다. 이 속성의 값을 fixed로 설정하면 페이지가 스크롤되더라도 배경 이미지는 뷰포트(브라우저 화면)를 기준으로 고정되어 표시됩니다.
background-attachment 주요 속성값
- scroll: 기본값으로, 페이지를 스크롤하면 배경 이미지도 함께 움직입니다.
- fixed: 뷰포트를 기준으로 배경 이미지가 고정되어, 콘텐츠가 스크롤되어도 이미지는 제자리에 머뭅니다.
- local: 요소 내부의 콘텐츠와 함께 배경 이미지가 스크롤됩니다.
예제
아래 코드를 실행하면 background-attachment 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
</style>
</head>
<body>
<h1>Background Image</h1>
</body>
</html>위 예제에서는 배경 이미지를 오른쪽 상단(right top)에 위치시키고, no-repeat 설정으로 이미지가 반복되지 않도록 했습니다. 핵심은 background-attachment: fixed 부분으로, 이 설정 덕분에 사용자가 페이지를 아무리 스크롤해도 배경 이미지가 화면에 고정된 상태로 유지됩니다.