xhml・html

【ネットビジネス便利ツール】のモバイル対応の続きです。

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

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を表示しています。