レスポンシブデザインで背景画像を設定したボックスのheight設定
便利だけどいろいろと設定が難しいレスポンシブデザインですが、個人的に一番厄介だと思うのは、背景設定です。
普通のテキストに背景画像を設定しているだけならまだしも、ボタンとして設定している場合が特に難しいというか、間違いやすいというか。
[code]
<p>
<a href="リンクするURL">
ハートブレーンCAFEで<br />
社長お手製コーヒーを飲もう
</a>
</p>
[/code]
こんなコードがあるとして、単純に
[css]
p a {
display: block;
width: 100%;
background: url(画像url) no-repeat left top;
background-size: contain;
}
[/css]
では
こんな表示になってしまいます。
background画像をレスポンシブに対応させる方法(たすデザイン様より)を参考、というか完全にコピーさせていただきました。
成立させるには、まず縦横の比率を計算します。
高さ÷横幅×100=padding-topの%(パーセント)
そして、cssを下記の通り設定します。
[css]
p a {
display: block;
width: 100%;
height: 0;
padding-bottom: 計算して出した%;
background: url(画像のURL) no-repeat 0 0;
background-size: contain;
}
[/css]
heightを0に、padding-topもしくはbottomに%を設定します。
上部に文字を載せる場合は、padding-topだと枠外に隠れてしまうので、padding-bottomにしてください。
ちなみに文字の内容は
社長「寒い。コーヒー淹れてこよう」(完全に独り言)
私「あ、ごちそうさまです」
空気を読む気が全くない社員Nの、日頃の行いの表れです。
ごちそうさまでした。
【ハートブレーン】https://blog.heart-kokoro.net
【ハートブレーン】https://heartbrain.netよろしければ、SNSでのシェアやランキングなど、応援よろしくお願いします。