웹 페이지에서 배경 이미지가 화면을 따라 움직이는지, 아니면 제자리에 고정되어 있는지를 결정하려면 background-attachment 속성을 사용합니다. 이 속성은 배경 이미지가 문서의 나머지 내용과 함께 스크롤되는지, 아니면 뷰포트에 고정되는지를 제어합니다.
background-attachment의 주요 값
- scroll (기본값): 배경 이미지가 요소와 함께 스크롤됩니다.
- fixed: 배경 이미지가 뷰포트에 고정되어, 페이지를 스크롤해도 위치가 변하지 않습니다.
- local: 배경 이미지가 요소의 콘텐츠와 함께 스크롤됩니다.
예제 코드
아래 코드를 실행하면 background-attachment: fixed;를 사용해 배경 이미지를 고정하는 방법을 직접 확인할 수 있습니다. 페이지를 아래로 스크롤해 보세요. 텍스트는 움직이지만 배경 이미지는 그대로 유지됩니다.
<!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-image로 배경 이미지를 지정하고, background-repeat: no-repeat;으로 이미지가 반복되지 않도록 설정했습니다. 핵심인 background-attachment: fixed; 덕분에 사용자가 페이지를 스크롤할 때 배경 이미지는 화면에 고정된 상태로 유지됩니다.
팁: 단축 속성으로 간결하게 작성하기
여러 배경 관련 속성을 한 번에 지정하고 싶다면 background 단축 속성을 활용할 수도 있습니다.
body {
background: url('/css/images/css.jpg') no-repeat fixed;
}이처럼 background-attachment 속성을 활용하면 패럴랙스 효과나 시각적으로 안정적인 배경 연출 등 다양한 디자인을 손쉽게 구현할 수 있습니다.