[HTML/CSS][Ch9][스타벅스] 고정 이미지 배경

index.html -> SEASON PRODUCT / RESERVE COFFEE / PICK YOUR FAVORITE 섹션 추가

<!--SEASON PRODUCT-->
  <section class="season-product scroll-spy">
    <div class="inner">

      <img src="./images/floating3.png" alt="Icon" class="floating floating3" />
      <img src="./images/season_product_image.png" alt="아이스 커피 블렌드" class="product back-to-position to-right delay-0" />

      <div class="text-group">
        <img src="./images/season_product_text1.png" alt="상쾌하게 여름을 반겨줄 시즌 원두 아이스 커피 블렌드" class="title back-to-position to-left delay-1" />
        <img src="./images/season_product_text2.png" alt="아프리카와 라틴 아메리카 커피의 브렌드로 시트러스함과 은은한 캐러멜 향을 동시에 느낄 수 있으며, 차갑게 즐길 때 풍미가 더욱 깊어지는 원두입니다." class="description back-to-position to-left delay-2" />
        <div class="more back-to-position to-left delay-3">
          <a href="javascript:void(0)" class="btn">자세히 보기</a>
        </div>
      </div>

    </div>
  </section>

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

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

    </div>
  </section>

  <!--PICK YOUR FAVORITE-->
  <section class="pick-your-favorite scroll-spy">
    <div class="inner">

      <div class="text-group">
        <img src="./images/favorite_text1.png" alt="PICK YOUR FAVORITE" class="title back-to-position to-right delay-0" />
        <img src="./images/favorite_text2.png" alt="다양한 메뉴를 스타벅스에서 즐겨보세요." class="description back-to-position to-right delay-1" />
        <div class="more back-to-position to-right delay-2">
          <a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
        </div>
      </div>

    </div>
  </section>

main.css -> -> SEASON PRODUCT / RESERVE COFFEE / PICK YOUR FAVORITE 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;   /* 반복 X -> 하나의 이미지만 나오게 설정 */
  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;
}

출력