画像が固定されるタイプ
さいごに、パララックス効果とは違うけど、テキストだけスクロールされて、背景の画像は固定されたままというタイプのヘッダーについて、背景画像として表示するタイプ、img要素で表示するタイプで作ってみます。
背景画像として表示するタイプで固定
background-attachmentプロパティでfixed
を使えば固定できますが、これだと、ウィンドウに対して固定されるため、background-size: cover;
の指定で、ウィンドウ全体を埋めるように配置されてしまい、今回のレイアウトではちょっと都合が悪いです…:(。
なのでここでもまた、header要素の::before擬似要素を使って表示することにします。
::before擬似要素にposition: fixed;
を指定して、ウィンドウに対して絶対配置します。fixed
を指定すると、親要素との関連が切れるため、height: 100%;
の指定が、ウィンドウの高さいっぱいになっちゃうので、50%
に指定し直します。
ライセンス表記もヘッダー画像と一緒に固定するなら、同じくposition: fixed;
を指定しましょう。
ウィンドウが基準になるため、bottom: 1em;
の指定だと、ウィンドウの底辺から1em上ということになっちゃうので、適宜位置を調整する必要があります。ここでは、ウィンドウの底辺から、50vh + 1em
上の位置に配置するようにしました。
これだけだと、main要素がヘッダーの下に潜ってしまうので、position: relative;
を指定します。
さらに、上に重なったときにちゃんとヘッダーを隠すように、背景色もつけておきましょう。
※はじめのdisplay: block;
は、IE11のための指定。詳しくはこちらの記事を参照のこと。
img要素で表示するタイプを固定
まずはobject-fitプロパティを使って表示させてるタイプ。
背景画像として表示したタイプとほとんど同じく、前述の::before擬似要素にした修正を、figure要素に施します。ライセンス表記もfigure要素の中に入ってるので、一緒に固定されますねー。
けれど、画像と一緒にライセンス表記も、半透明のスクリーンの下に隠れるようになっちゃいました…X(。
figure要素が、親要素との関連が切れたことで、その子要素もfigure要素の中に隔離されちゃったカンジなんです。z-indexプロパティを指定しても、figure要素の外に出られないから、半透明スクリーントーンの上にいけない状態なんですね…。
なので、header要素の::after擬似要素として作った半透明スクリーントーンは非表示にして、新たに、figure要素の::before擬似要素として作り直すことにします。
あとは前述と同じく、main要素に背景色をつけたりなんだりで、できあがり。
object-fitプロパティを使わずに表示させてるタイプも、全く同じ!