【有印良品2019】(メインイメージ切替)②

ヒーローヘッダー

某良品ウェブサイト母の日特集をサンプルに練習します。
● サンプルにする公式サイトはこちら(2019年度版)

大きいイメージを用いて、ヒーローヘッダー部分を作成します。公式サイトは、<img src="">、z-indexを使って重ねる手法を取り入れていましたが、練習では、background-sizeを使って再現してみます。

---

練習しやすいオリジナルサンプルを用意しました。
▶　【有印良品：母の日】サンプルを見る

---

「おかあさん、ありがとう」のメッセージ部分は、公式サイト同様に画像を用います。背景にヒーローイメージを敷きその上に重ねるように配置します。