background-imageを別の要素に対して上書きする&ポジショニングする
Frontend Mentor の「Easybank landing page」をchallenge中。
完成品のサイト。
https://codercoder-easybank.pages.dev/
![](https://assets.st-note.com/img/1666748028320-D7S0hv0Ohj.png?width=1200)
/* mobileからつくる */
.hero {
background-color: #fff;
}
.hero__image {
/* margin-top: 6rem; */
position: relative;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* 📝お手本では短すぎる */
min-height: 50rem;
/* ⭐ここでやると切り替わらないdesktopで*/
/* background-image: url(./images/bg-intro-mobile.svg); */
/* 🤔変わらない */
background-position: center bottom;
}
.hero__image::before {
/* 👩🎓you need to give it a Content property */
content: "";
position: absolute;
width: 100%;
🙋🙋height: 160%;
/* 携帯たち */
background-image: url(./images/image-mockups.png);
/* 👩🎓4/7 13:08 画像のサイズを変える*/
background-size: 90%;
background-repeat: no-repeat;
/* 4/7 11:45 */
/* ここだと効く */
🙋🙋background-position: 30% -10rem;
}
🙋🙋がポイントです。
height: 100%;だと途中で切れてしまっていましたが、160%くらいで全部スッキリ収まりました。
background-positionは初期値 左上 0% 0%
この記事が気に入ったらサポートをしてみませんか?