Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

背景画像をレスポンシブ対応させる方法

背景画像をレスポンシブ対応させる方法

コネも知識もなく飛び込んだWebデザインの世界ですが、最近になってようやく仕事が板についてきた気がします。プロの方と比較したら、素人に毛の生えた程度の知識しかありませんが。(泣)

普通の画像のレスポンシブと違って、意外と難解な背景画像のレスポンシブについて、勉強と備忘録を兼ねてまとめておきます!

画像をレスポンシブ対応にする

まずはおさらいとして、普通の画像をレスポンシブに対応させる方法です。スタイルシートで以下のように記述してあげましょう。

画像に対して、横幅100%と指定してあげるだけです。%指定にしてあげる点がポイントで、これだけで横幅に合わせてサイズが可変となります。

これ以上、画像のサイズが大きくなってほしくない、逆に小さくなってほしくない、なんてときはmax-widthやmin-widthを追加してあげましょうか。

こう指定してあげれば、画像のサイズは最小値100px、最大値300pxの間で可変になります。

背景画像のレスポンシブ

ということで本題の背景画像のレスポンシブです。
<div class=”bg-responsive”></div>のようなタグを書いて、単純にdiv要素にbackground-size:containと指定しただけだと何も表示されません。div要素内に何も記述がない=div要素の高さは0なので、それだと何も表示されませんよね。かといって、height:200pxのようにpx表記をしてしまうと、レスポンシブになりません。%表記も無意味です。

ちょっとひねった表記をしてあげます。

高さを0にして、余白のサイズが可変で取ることで背景画像をレスポンシブ対応で表示させます。

HTMLタグはシンプルにdiv要素を用意してあげるのみです。div要素内に文字を入れると、背景画像から文字がはみ出たりするので要注意!

普通の画像をレスポンシブさせるのと違って、面倒です。
背景画像のレスポンシブの使いどころはおそらく、サイトのトップページによくあるアイキャッチ画像の箇所でしょうか。めんどくさいなら、正直なところ普通にimgタグを使ったほうが楽ですね・・・。

はっきり言って面倒なので、私もあまり使いたくありません。
表現の一つとして、覚えておきましょうか。

コメントを残す

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

CAPTCHA