これを試して...
#background {
background: url('image/myimage.jpg') center center;
}
また
body {
background: url('image/myimage.jpg') center center;
}
ボディ レベルで背景を設定できる場合は、#background 要素は必要ありません。
ただし、CSS を使用して画像を設定しても画像は拡大縮小されず、「中央の中央」は画像を垂直方向および水平方向の中央に配置します。
画像サイズに関係なく、これは中央に配置されます。ただし、表現した「オーバースキャン」スタイルを取得するには、サポートする最大解像度よりも大きな画像を常に提供する必要があります。
ただし、背景画像を引き伸ばしたい場合は、次の操作を実行できます。JavaScript と jQuery ライブラリを使用する必要があります。
HTML:
<div id="divBackWrapper">
<div id="divBackCenter">
<img src="http://www.abc.net.au/radionational/image/4220698-3x2-700x467.jpg" width="700" height="467" />
</div>
</div>
CSS:
html, body {
width: 100%; height: 100%;
padding:0; margin:0;
}
#divBackWrapper, #divBackCenter {
position: absolute;
width: 100%; height: 100%;
overflow: hidden;
}
#divBackCenter {
overflow: visible;
top: 50%;
left: 50%;
}
#divBackWrapper img {
position: absolute;
width: 100%; /* change to auto to allow width set by height, one must always be 100% */
height: auto; /* change to 100% to allow height stretching */
min-width: 700px;
min-height: 467px;
top: -50%; /* half height */
left: -50%; /* half width */
}
JS:
jQuery(function() {
$(window).resize(function() {
var $window = $(window);
var $img = $("#divBackCenter img");
if ( $img.width() <= $window.width() ) {
$("#divBackCenter").removeAttr("style");
$("#divBackCenter img").removeAttr("style");
return;
} else {
var css = {};
css.top = -($img.height() - $window.height()) / 2;
css.left = -($img.width() - $window.width()) / 2;
$("#divBackCenter").css({top:0,left:0});
$("#divBackCenter img").css(css);
}
});
});