WEB系キャンパス

(K)CSSで背景画像をスクリーンいっぱいに表示させてみた(CSS覚え書き)

背景画像を画面いっぱいに表示させる方法

カフェやインテリアショップ、アーティストのHPによく見る、背景画像がモニターいっぱいに表示されていて、スクロールすると画像の大きさが縦横比が固定されて、拡大縮小するレイアウトに今回は挑戦です。
※javascriptを使ってもできるのですが、今回の目標はCSSのみでの作成です。

今回参考にさせていただいたサイト様m(_ _)m

【1つ目の方法】positionを使って背景を固定※IE6未対応

もっともシンプルなやり方

HTMLマークアップ

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>背景画像を画面いっぱいに(サンプル1)</title>
</head>
<body>
<img class="back" src="img/back.jpg" alt="背景サンプル画像" />
<div id="container">
	
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	
</div><!-- /#container -->


</body>
</html>

ポイントは＜body＞のすぐ下に背景となる画像を指定すること。指定している画像のサイズを超えるディスプレイサイズになれば当然背景は荒れますが、今回は1000×710の画像を使用します。

んで、CSSコーディング


img.back{
	min-height: 100%;
	min-width: 1024px;
	width: 100%;
	height: auto;
	position: fixed;/*absoluteを指定した場合背景画像もスクロール*/
	top:0;
	left:0;
}	


div#container{
	position: relative;/*←ポイント!!*/
	background-color: #fff;/*↓ここから下はcontainerのレイアウト*/
	margin:60px auto;
	padding: 50px;
	width: 400px;
	border-radius: 20px;
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}

背景に指定する部分にposition:fix、コンテンツ部分にpositon:relativeの指定。
position:fixをabsoluteにすると、スクロールバーが出るので、用途によって使い分けましょう。

んで、できたサンプルがコレ!!

【2つ目の方法】background-size:coverを使う※IE7,6未対応

次は、背景画像の指定するプロパティのみで作成する方法

HTMLマークアップ

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>背景画像を画面いっぱい(サンプル2)</title>
</head>
<body>
	
<div id="container">
	
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	<p>ここにコンテンツ</p>
	
</div><!-- /#container -->

</body>
</html>

＜img＞を指定しない以外はさっきとほぼ同じですね。

んで、CSSコーディング

html{
	min-height: 100%;
	background: url(img/back02.jpg) no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size:cover;
}
	
div#container{
	background-color: #fff;/*↓ここから下はcontainerのレイアウト*/
	margin:60px auto;
	padding: 50px;
	width: 400px;
	border-radius: 20px;
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}

html自体に背景画像を指定してbackground-size:coverを指定します。
background-size:coverは、背景画像のサイズを指定するプロパティで、縦横比を固定して背景の領域を全体に覆って拡大・縮小してくれます。
んで、できたサンプルがコレ!!

他のbackground-sizeはこんな感じ

auto
自動(デフォルト)
contain
縦横比を保持して、背景領域に収まるサイズになるように拡大・縮小してくれます
px指定
指定した幅・高さで表示
％指定
パーセンテージの幅・高さで表示

まとめ

javascriptで表示させるよりCSS1本の方がサクッと感はありますね。
2つ目の方法のほうが自分的にはいいんですが、IE７に未対応っていうのがネックですね・・・。
背景に素敵な写真が配置されれば、それだけでサイトがグッとオシャレになるので、覚えていて損はないテクニックです。どんどん表現の引き出しを増やしていこうと思う今日このごろ、本日はこの辺で。以上、＠Kc_fujiでしたm(__)m

こちらの記事もあわせてどうぞ

コメントを残す

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