CSS) background-attachment

1) background-attachment

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

속성 값

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

 

사용법

1. background-attachment: fixed;

html

<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>
<section class="section4"></section>
<section class="section5"></section>

css

section {
  height: 300px;
/*   border: 2px dashed lightgray; */
}
.section2 {
  background-image: url("https://www.starbucks.co.kr/common/img/main/fav_prod_bg_new.jpg");
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}
.section3 {
  background-image: url("https://image.istarbucks.co.kr/upload/common/img/main/2021/2021_summer3_bean_bg.jpg");
  background-size: auto 100%;
  background-position: right bottom;
  background-attachment: fixed;
}

출력결과

※ background-attachment: fixed; 를 이용해서 뒷 배경을 화면에 고정시킨다.
이미지 효과는 스타벅스의 홈페이지의 효과와 동일하다.
https://www.starbucks.co.kr/index.do

스타벅스 커피 코리아

 

 

1. background-attachment: local;

html

<div class="container">
  <div class="for-scroll"></div>
</div>

css

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

출력결과

※ background-attachment: local; 내부 컨테이너 내에서만 배경이 스크롤 된다.