background-attachment

background-attachment (배경 고정·스크롤)

배경 이미지가 스크롤과 함께 움직일지, 뷰포트에 고정될지를 정하는 유틸리티예요. 배경 이미지를 화면에 고정하고 싶을 때 특히 유용해요.

출처: 문서

클래스	스타일
`bg-fixed`	`background-attachment: fixed;`
`bg-local`	`background-attachment: local;`
`bg-scroll`	`background-attachment: scroll;`

bg-fixed 유틸리티는 배경 이미지를 뷰포트에 상대적으로 고정해요.

콘텐츠를 스크롤해 보면 배경 이미지가 제자리에 고정되어 있는 것을 확인할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] bg-fixed ...">
  <!-- ... -->
</div>

bg-local 유틸리티는 배경 이미지를 컨테이너 및 뷰포트와 함께 스크롤되게 해요.

콘텐츠를 스크롤해 보면 배경 이미지가 컨테이너와 함께 움직이는 것을 확인할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] bg-local ...">
  <!-- ... -->
</div>

bg-scroll 유틸리티는 배경 이미지를 뷰포트와 함께 스크롤되게 하되, 컨테이너와는 함께 움직이지 않게 해요.

콘텐츠를 스크롤해 보면 배경 이미지가 컨테이너 안에 고정되어 있는 것을 확인할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)] bg-scroll ...">
  <!-- ... -->
</div>

background-attachment 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="bg-local md:bg-fixed ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.