CSS의 background-attachment 속성은 배경 이미지가 페이지와 함께 스크롤될지, 아니면 화면에 고정될지를 결정하는 속성입니다. 웹 페이지에서 시차 스크롤(parallax) 효과를 구현하거나 배경을 고정된 상태로 유지하고 싶을 때 유용하게 활용할 수 있습니다.
background-attachment의 주요 값
- scroll (기본값): 배경 이미지가 요소와 함께 스크롤됩니다.
- fixed: 배경 이미지가 뷰포트(viewport)에 고정되어, 페이지를 스크롤해도 위치가 변하지 않습니다.
- 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>참고 사항
fixed 값은 모바일 브라우저에서 성능 문제나 호환성 이슈를 일으킬 수 있으므로, 반응형 웹에서는 미디어 쿼리를 통해 데스크톱 환경에서만 적용하는 것이 좋습니다. 또한 여러 개의 배경 이미지를 사용할 경우 각 이미지마다 서로 다른 attachment 값을 쉼표로 구분하여 지정할 수도 있습니다.