고정 이미지 배경

뷰포트에 배경 이미지를 고정하여 스크롤을 내리더라도 배경 이미지가 고정되도록 구현한다.
(윗부분의 구성도 함께 구현)

코드

HTML

  <!-- SEASON PRODUCT -->
  <section class="season-product scroll-spy">
    <div class="inner">
      <img class="floating floating3" src="./images/floating3.png" alt="Icon" />
      <img class="product back-to-position to-right delay-0" src="./images/season_product_image.png" alt="" />

      <div class="text-group">
        <img class="title back-to-position to-left delay-1" src="./images/season_product_text1.png" alt="" />
        <img class="description back-to-position to-left delay-2" src="./images/season_product_text2.png" alt="" />
        <div class="more back-to-position to-left delay-3">
          <a class="btn" href="javascript:void(0)">자세히 보기</a>
        </div>
      </div>

    </div>
  </section>



  <!-- RESERVE COFFEE -->
  <section class="reserve-coffee scroll-spy">
    <div class="inner">

      <img class="reserve-logo back-to-position to-right delay-0" src="./images/reserve_logo.png" alt="" />

      <div class="text-group">
        <img class="description back-to-position to-right delay-1" src="./images/reserve_text.png" alt="" />
        <div class="more back-to-position to-right delay-2">
          <a class="btn btn--gold" href="javascript:void(0)">자세히 보기</a>
        </div>
      </div>

      <img class="product back-to-position to-left delay-3" src="./images/reserve_image.png" alt="" />

    </div>
  </section>



  <!-- PICK YOUR FAVORITE -->
  <!-- 여기서부터 고정 이미지 섹션 -->
  <section class="pick-your-favorite scroll-spy">
    <div class="inner">

      <div class="text-group">
        <img class="title back-to-position to-right delay-0" src="./images/favorite_text1.png" alt="" />
        <img class="description back-to-position to-right delay-1" src="./images/favorite_text2.png" alt="" />
        <div class="more back-to-position to-right delay-2">
          <a class="btn btn--white" href="javascript:void(0)">자세히 보기</a>
        </div>
      </div>

    </div>
  </section>

CSS

/* SEASON PRODUCT */

.season-product {
  background-image: url('../images/season_product_bg.jpg');
}

.season-product .inner {
  height: 400px;
}

.season-product .floating3 {
  position: absolute;
  top: -200px;
  right: 0;
}

.season-product .text-group {
  position: absolute;
  top: 110px;
  right: 100px;
}

.season-product .text-group .title {
  margin-bottom: 10px;
}

.season-product .text-group .description {
  margin-bottom: 15px;
}

.season-product .text-group .more {}



/* RESERVE COFFEE */

.reserve-coffee {
  background-image: url(../images/reserve_bg.jpg);
}

.reserve-coffee .inner {
  height: 400px;
}

.reserve-coffee .reserve-logo {
  position: absolute;
  top: 110px;
  left: 0;
}

.reserve-coffee .text-group {
  position: absolute;
  top: 124px;
  left: 208px;
}

.reserve-coffee .product {
  position: absolute;
  top: 0;
  right: 0;
}


/* PICK YOUR FAVORITE */
/* 여기서부터 고정 이미지 배경 섹션 */

.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.pick-your-favorite .inner {
  padding: 110px 0;
}

.pick-your-favorite .text-group {
  width: 362px;
  margin-left: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pick-your-favorite .text-group .title {
  margin-bottom: 40px;
}

.pick-your-favorite .text-group .description {
  margin-bottom: 40px;
}