背景画像をレスポンシブ対応するにはどうしたらいいの?

LPなどを作る時、あるセクションだけ背景画像を設置することがあります。

その画像がただのパターンとかならいいんですが、切れて欲しくない画像の場合
今まで、divやsectionに高さを指定して、画像を全て見えるようにしてました。

↑↑↑ このように、完成された画像を背景画像として出したい場合

 

しかしそのやり方だと、スマホ対応が難しい。

画像自体は、background-coverで画面に合わせて縮小できるけど、高さを指定してるから縦幅だけはPCの時のまま、画像だけが小さくなるというチグハグなデザインになってしまう。

高さをautoにすると、画像が切れてしまうし。(heightは背景に合わせてはくれない)

 

そこで、とてもいい方法をこちらのTabeppa!(たねっぱ)さんという、個性的なネーミングのサイトから教えてもらいました!!!
https://taneppa.net/responsive_background_image/

 

これは素晴らしい!!!
ずっと悩みの種だったんだけど、解消されましたーー!!!
感謝感謝です。

 

そのままコードを使わせてもらいますが

.box{
width: 100%;
height: 0;

/* (画像の高さ / 画像の横幅) × 100 */
padding-top: 66.6666666667%;

background: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

 

Taneppaさんの記事を読んでもらったらわかると思いますが
私なりの補足というか蛇足というか、どうでもいい意見を付け加えておきます。

 

今までheight:●px;
で、背景画像の高さのサイズを書いてたんだけど、冒頭で述べたとおり、それだとレスポンシブ対応するときにとても大変。というかできない。
今まではスマホ用にタグを切り替えてました。

 

でも、padding-topで背景画像の高さを%で指定することによって、レスポンシブ対応できるのです。
どうやって高さを指定するのかというと、画像の幅と高さの比率で。
横幅に対して、高さは何%かということ。

 

それが
(画像の高さ / 画像の横幅) × 100
=padding-top: 66.6666666667%;
ということなんですね。

 

例えば、
高さが350で横幅が600の画像の場合、
350➗600✖️100=58.33333333%

というわけで、padding-top:58.3%;
と書いたら、レスポンシブ対応バッチリでした。

 

私の尊敬する、プログラマーの中田亨さんが、すっごくわかりやすく説明してくださいました。
↓↓↓

widthやheightの%は親要素のサイズが基準になるのに対して、padding はその要素自身のサイズが基準になる

この説明が、めっちゃしっくりくる!さすが書籍を何冊も執筆されてるだけあって、説明が上手・・・

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

りりちこです。福岡在住2児の母です♪ web制作をしてます。またwebデザインで仕事をしたい方のサポートもしてます。 目まぐるしく変化していくWebの世界で生き残っていくために、日々インプットアウトプットを繰り返しています。