2013/10/18

背景画像をフルスクリーン＆レスポンシブ対応にする方法

htmlを準備する

まずはHTMLを準備します。
[html]
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>背景画像はフルスクリーンにして、レスポンシブにも対応しています</title><br>
<link rel="stylesheet" href="sample.css" />
</head>
<body>
<h1>背景画像はフルスクリーンにして、レスポンシブにも対応しています</h1>
</body>
</html>
[/html]

画像を準備する

背景に表示するきれいな画像を準備します。
サイズは今回のサンプルで左右1600px、天地1000px、解像度72ppiです。
これぐらいの大きさであれば、かなり大きなモニターで表示しても、問題ないでしょう。
うちのモニターは1920px 1080pxですが、まったく問題なくキレイに表示されています。

CSSを記述する

つづいてCSSを記述します。
background-sizeプロパティで、背景画像の表示サイズを指定します。

[css]
html {
min-height: 100%;
background-size: cover; /*ボックス全体をカバーする大きさで表示*/
background-image: url(autumn-leaves_beiz.jp_L07128.jpg);
background-repeat: no-repeat;
background-position: center bottom;/*写真の見せたい場所を調整*/
}
body{
min-height:100%;
color: #fff;
}
[/css]

サンプルを用意しています。
参考にどうぞ。
sample