• このエントリーをはてなブックマークに追加

背景を画面全体に表示されたいときってありますよね。大きな背景画像を1枚準備しておいて、その画像を読み込むまでは良いが、100%表示としてもうまくいかないケースが有るかと思います。そういった場合のサンプルソースコードスニペットをご紹介します。

CSS3での方法

<p>にマージンがついていると都合が悪いのでリセットしています。基本的にはやり方は同じ、縦がひっつかないので、#containerをストレッチしている。bodyに背景を敷く場合はこんなことしなくてもいい。

<style type="text/css">
body{
margin:0;
padding:0;
background:#f00;
overflow:auto;
}
#container{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
background:url(https://example.com/sample.jpg) no-repeat 0 0;
background-size:cover;
}
p{
margin:0;
}
</style>
<body>
<div id="container">
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
</div>
</body>

CSS3での方法(cover:50%50%)

背景の位置を50%・50%としている。こうすることで背景画像を中央に設置することができる。背景はストレッチされるので、縦横のどちらか長い方に合わせて拡大縮小して、画像が小さいとぼやけて見える。余白やこの背景ブロックにのるコンテンツが見づらくならないようにするため工夫が必要。

<style type="text/css">
body{
margin:0;
padding:0;
background:#f00;
overflow:auto;
}
#container{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
background:url(https://example.com/sample.jpg) no-repeat 50% 50%;
background-size:cover;
}
p{
margin:0;
}
</style>
<body>
<div id="container">
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
</div>
</body>

bodyに背景を設定する際は、body{ここ}に#containerの背景を設定する。

<style type="text/css">
body{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
background:url(https://example.com/sample.jpg) no-repeat 50% 50%;
background-size:cover;
}
p{
margin:0;
}
</style>
<body>
<div id="container">
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
</div>
</body>

IE8以前の方法

背景をbody以外でもめいっぱい適用したいというときのためのメモ。絶対位置で#containerに上下左右の位置を0にすればピッタリと縦横100%の領域をとることができる。コンテンツがオーバーしたときはoverflowで対応。

IE7、IE8、Firefox3.6、Opera10.6、Chrome6.0、Safari5.0で動作確認済みです。
※ただし、このシンプルなboxのみ動作確認しただけなので、内部に複雑なコンテンツを入れていくとうまくいかないかもしれないです。

<style type="text/css">
body{
margin:0;
padding:0;
overflow:hidden;
}
#container{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:#ffc;
overflow:auto;
}
</style>
<body>
<div id="container">
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
<p>page</p>
</div>
</body>