CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 어떻게 하면 배경 이미지를 고정할 수 있을까요?
# CSS를 사용하여 background 고정하는 방법
일반적으로 가장 많이 사용되는 방법은 css가 아닌 레이어를 추가하여 해당 레이어를 고정시키는 방법입니다. position: fixed를 사용하면 해당 레이어를 고정할 수 있죠. 하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.

이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다.

  • scroll  //  스크롤에 따라 이동하는 방법(Default)
  • fixed  //  항상 고정된 이미지로 동작

사이트 내에서 스크롤을 통해 영역을 이동할때 뒤에 위치한 배경화면인 background-image가 고정된 형태로 나타나는 것을 볼 수 있습니다. 간단하게 생각했을때 고정된 요소가 하나 있고 그곳에 배경 이미지가 있을 것이라 예상할 수 있지만 사실 background-attachment 속성을 사용하면 현재의 요소안에서도 배경이미지를 고정할 수 있습니다. 마치 position: fixed; 속성값처럼 말이죠... 아래 예제를 직접 동작해 보세요.



# background-attachment 동작해보기
아래의 이미지 두 개는 동일한 이미지를 각각 다른 값으로 적용하였습니다. 실제로 스크롤을 동작해보면 그 차이를 알 수 있습니다.

! background-attachment: fixed;


! background-attachment: scroll;


직접 동작해보면 확실히 그 차이를 알 수 있습니다. 배경 이미지가 스크롤과 함께 이동하거나 스크롤과 상관없이 이동하지 않을 수 있죠. 이처럼 배경 이미지를 고정하는 방법은 많이 사용됩니다. 요즘은 단순하게 고정되는 것 뿐만 아니라 서서히 이동하는 애니메이션 효과 역시 많이 사용됩니다.