CSS3

【CSS】いつも忘れる。。背景画像をレスポンシブ(可変)に対応させる4つの方法

【CSS】いつも忘れる。。背景画像をレスポンシブ(可変)に対応させる4つの方法

【CSS】いつも忘れる。。背景画像をレスポンシブ(可変)に対応させる4つの方法
【CSS】いつも忘れる。。背景画像をレスポンシブ(可変)に対応させる4つの方法

最近ファーストビューをいかにストレスなく表示させるかというのをやっています。
多くの場合、画像はリクエストの優先順が下がり、最後に読み込まれると思いますが、
その際問題になるのが、表示の「ガタツキ」です。

ガックンってなるやつ。

画像のレスポンスが返ってくる際に画像の高さが予め確保されていないためにレイアウトが再計算されることによるものですが、
これをなくすために、インラインスタイルとして高さを指定しておく方法があります。

描画されるときには枠はすでにあり、そこに描画されるイメージなのです。

告白すると自分はCSSの中でbackground-sizeが苦手です。
ちゃんと理解していないので 今回改めて勉強し直しました。。

デモを作ってみました。。

デモ

backgroundの基本知識

・background-size
背景画像のサイズを指定する

・background: 50px;
とした場合幅が50px 高さはautoが入る

・background: 50% 50%;
とした場合表示領域に対しての幅50%高さ50%の領域で表示される

・background: 100% 100%;
→表示領域の縦横にぴったりくっついて表示されるので画像の比率は維持されない

background
・高さを指定する必要がある
・もしくはテキストか子要素を持つ必要がある
background vs background-image
他のプロパティの引数を取れるか取れないかの違い
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment inital|inherit

background: cover
・画像の幅と高さの比率(アスペクト比)を保ちつつ、固定されたまま背景の表示領域を覆うように表示
・表示領域の幅が広げられた場合: 上下の高さがオフセットされる
・表示領域の高さが広げられた場合: 画像の左右がオフセットされるように表示される

background: contain
coverとの違いはオフセット機能がない
表示領域が変更された場合でも画像が全て表示される

coverとcontainの違い
https://stackoverflow.com/questions/27939971/difference-between-background-sizecover-and-background-sizecontain

background-size
・親要素に対しての%ではない。画像に対しての%
・imgやdivは%指定するだけで可変になるが
背景画像は%指定しただけでは親要素やコンテンツに追随した可変レイアウトにならない
「背景画像に対する割合を指定するプロパティ」
https://dresscording.com/blog/responsive/background-size.html

下記のコードについて考えてみます。

①アスペクト比を保ちながら可変(image要素)

②アスペクト比を保ちながら可変(背景画像) テキストは後続

③アスペクト比を保ちながら可変(背景画像) テキストはの中央

④background-containで背景画像を可変に保つ

デモ
ありがとうございました〜