고정 이미지 배경
뷰포트에 배경 이미지를 고정하여 스크롤을 내리더라도 배경 이미지가 고정되도록 구현한다.
(윗부분의 구성도 함께 구현)
코드
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;
}
Author And Source
이 문제에 관하여(고정 이미지 배경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rkde8938/고정-이미지-배경저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)