#18. CSS - background-attachment: fixed

background-attachment

nike 공식 홈페이지에 있는 이미지들을 배경으로 놓고 fixed 옵션을 적용해 보았습니다.

<!-- HTML -->
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>

section {
  height: 500px;
}
.section1 {
  background-image: url("https://static-breeze.nike.co.kr/kr/ko_kr//cmsstatic/structured-content/65250/211102_wlp_p6_bg.jpg");
  background-size: auto 100%;
  background-position: right;
  background-attachment: fixed;
}
.section2 {
  background-image:
    url("https://static-breeze.nike.co.kr/kr/ko_kr//cmsstatic/structured-content/65250/211027_hp_p5_bg.jpg");
  background-size: auto 100%;
  background-position: right;
  background-attachment: fixed;
}
.section3 {
  background-image:
    url("https://static-breeze.nike.co.kr/kr/ko_kr//cmsstatic/structured-content/65250/211102_wlp_p7_bg.jpg");
  background-size: auto 100%;
  background-position: right;
  background-attachment: fixed;
}

뒤에 배경은 고정이 된 상태로 요소들만 움직이는 것을 확인할 수 있습니다.