[CSS3] background - 배경이미지가 고정되거나 스크롤과 같이 움직이도록 만들기

background-attachment 를 이용해 배경화면이 스크롤에따라 어떻게 반응할 것인지 지정합니다. 

 

background-attachment:scroll;

배경이 들어가는 영역의 컨텐츠를 스크롤하면 배경이미지는 움직이지 않습니다. 

상위영역이 스크롤이 되어 영역이 움직이더라도 배경이미지는 그대로 입니다. 

 

 

background-attachment:fixed;

배경이 들어가는 영역의 컨텐츠가 스크롤 되더라도 배경이미지는 고정되어있습니다.

상위영역이 스크롤되어 영역이 움직이면 해당위치의 이미지가 들어납니다. 

 

 

 

scroll값과 다른점은 scroll값은 배경이 들어가는 영역에 고정되어있지만

fixed는 이미지 자체가 고정됩니다. 영역이 스크롤 되어 위쪽으로 밀리면 배경이미지는 그대로고 영역만 움직이기 때문에 보여지는 이미지가 다름니다. 아래 codepen을 통해 그 차이를 확인 하실 수 있습니다.

 

 

background-attachment:local;

스크롤이 움직임에 따라 배경이미지도 움직입니다.

 

배경이 들어가는 영역 크기가 아닌 스크롤 되는 영역의 크기만큼(컨텐츠의 길이만큼) 이미지가 들어가 있는듯한 효과입니다.