background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정

 

 

속성 값

값	의미	기본값
scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨	scroll
fixed	배경 이미지가 Viewport에 고정되어, 요소와 같이 스크롤되지 않음
local	요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

 

 

.container {
  width: 400px;
  height: 300px;
  border: 4px solid red;
  margin: 50px;
  overflow: auto;
  background-image: url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 50%;
}

.for-scroll{
  height: 2000px;
}

이렇게 이용하면 이미지가 스크롤을 내려도 아무런 변화가 없다. 이를 해결하기 위해서 background-attachment를 사용한다.

 

.container {
  width: 400px;
  height: 300px;
  border: 4px solid red;
  margin: 50px;
  overflow: auto;
  background-image: url("https://heropy.blog/css/images/vendor_icons/html5.png");
  background-size: 50%;
  background-attachment: local;
}

.for-scroll{
  height: 2000px;
}

--> 지역적으로 스크롤했을때 이미지가 반응하게 만들었다.