0

私は非常に大きなイメージを持っています。この画像をウェブサイトの背景として使用したいと考えています。また、この画像を引き伸ばして、さまざまなブラウザー ウィンドウのサイズに合わせたいと考えています。

これが私が思いついた解決策です。(皆さんが読みやすいように、jFiddle に置きました)。

http://jsfiddle.net/sGyax/

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000;}

<body>
<div id="background">
    <img src="background/001.JPG" class="bg"/>
</div>
</body>

HTMLでIMGタグを使用せずにこれを行う方法はありますか? 残りのレイアウトに干渉します。

4

2 に答える 2

1

巨大な負の z-index を持つ画像の代わりに背景画像(以下の例を参照) にし、ページ全体をカバーするために CSS3 のbackgound-sizeプロパティを使用することを検討してください。

background-image: url(background/001.JPG)
于 2013-03-24T01:27:03.087 に答える
1

これは、IE9/10 および現在の Firefox、Opera、および Chrome で動作するはずです。

html{
    background: url(background/001.JPG) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
}
于 2013-03-24T01:31:44.090 に答える