background-imageを別の要素に対して上書きする&ポジショニングする

Frontend Mentor の「Easybank landing page」をchallenge中。

完成品のサイト。
https://codercoder-easybank.pages.dev/

解説動画。
https://www.youtube.com/watch?v=8w_kHIAkucA&list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k&index=2&ab_channel=CoderCoder

右下のスマホがテキストにかぶさるようにしたい。

/* 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は初期値　左上　０％　０％