燈明ブログ

現状は小池啓仁の応援ブログ

背景画像がブラウザ表示領域に合わせて伸び縮み

背景画像をブラウザにあわせる

これを実現させるには、CSSのbackground-imageプロパティを使えば出来そうですが、残念ながら出来ません。

そこで、img要素をブラウザ表示領域の左上(left:0; top:0;)絶対位置指定(position: absolute;)で、あたかも背景画像のようにするのです。

つぎに、div要素を絶対位置指定(position: absolute;)にして、この中をあたかもbody要素とするのです。

サンプル

<html>
<head>
<title>背景画像がブラウザ表示領域に合わせて伸び縮み</title>
<style type="text/css">
#dummy-background-image {
    width: 105%;
    position: absolute;
    top: 0;
    left: 0;
}
#dummy-body {
    position: absolute;
}
</style>
</head>
<body>
<img id="dummy-background-image" src="hiro.jpg" />
<div id="dummy-body">
<h1> 背景画像がブラウザ表示領域に合わせて伸び縮み</h1>
<h2> 解説 </h2>
<p>これを実現させるには、CSSのbackground-imageプロパティを使えば出来そうですが、残念ながら出来ません。</p>
<p>そこで、img要素をブラウザ表示領域の左上(left:0; top:0;)絶対位置指定(position: absolute;)で、あたかも背景画像のようにするのです。</p>
<p>つぎに、div要素を絶対位置指定(position: absolute;)にして、この中をあたかもbody要素とするのです。</p>
</div>
</body>
</html>