xhml・html

レスポンシブWebデザイン 背景画像

2019年03月23日
ネットビジネス便利ツール】のモバイル対応の続きです。

本文中の見出し部分にも横に細長い画像を背景に使っていました。スマートフォンの横幅より長い画像なので、スマホでは横幅がはみ出してしまいます。
画像の上に文字を載せているし、文字は小さくすると読めなくなるので、背景画像をブラウザ幅に合わせて縮小表示するのでは駄目でした。
短くした画像を用意してもいいのですが、それはやめて背景色で対応しました。

html -------------------------------------------------
<h2>見出し<h2>
------------------------------------------------------

css -------------------------------------------------
h2 {
background-color: #8C1016;
}

@media (min-width: 600px) {
h2 {
background: url(横長画像へのパス) no-repeat;
}
}
------------------------------------------------------

ブラウザの横幅が599px以下なら画像を使わず背景色を変え、600px以上なら背景に画像を使います。


同じく背景画像を設定していますが、
ビジネス羅針盤 ステップメール

PayPalで楽アフィリエイト
のヘッダの背景画像は、ブラウザの表示幅に合わせて縮小表示しています。

css -------------------------------------------------
#header{
width: 100%;
height: 200px;
margin: 0 auto;
background: #FFFFFF url(header.jpg) no-repeat center top;
background-size: 100%;
}

@media (min-width: 756px) {
#header{
width: 754px;
height: 364px;
margin: 0 auto;
background: #FFFFFF url(header.jpg) no-repeat left top;
}
}
------------------------------------------------------

755px以下ならブラウザ幅全体にheader.jpgを表示、756px以上なら幅754pxに固定してheader.jpgを表示しています。
コメントの書き込み
コメント