2012-11-16 11 views
8

私はページ上の物理的なイメージを持っている...imgは背景のように動作しますか?

<img src="image.png" alt="image-name" /> 

私はそれが身体の背景画像だったかのように振る舞うしたい、それを見て、ブラウザなしで中心..

body{ 
background: url(image.png) no-repeat center top; 
} 

すなわち、ブラウザなどの幅が広い場合はスクロールバーがありません。

これは可能ですか?

+0

イメージは常に中央に配置されていますか? – luiges90

答えて

1

position: fixed; z-index: -5000は何ですか?

position: fixedコンテンツは、ブラウザの特定の位置に常に固定されます。

z-index: -5000はちょうどそれは私はあなたが事前に画像のサイズを知っておく必要があると思う中心にするために、すべて

の後ろに画像を置きます。追加する場合は、

top: 50%; 
left: 50%; 
margin-top: -100px; 
margin-left: -250px; 

ここで、100は画像の高さの半分、250は画像の幅の半分です。 Center a position:fixed element

デモから撮影:http://jsfiddle.net/SPsRd/1/

3

はい、それはあなたがおそらくこのような何かを行う必要があるでしょう、可能です:

CSS

#your-image { 
    position: absolute; 
    z-index:1; 
} 
#container { 
    position: relative; 
    z-index: 2; 
} 

HTML

<body> 
    <img id="your-image src="" alt=""> 
    <div id="container"> 
     <!-- All your content goes there --> 
    </div> 
</body> 
+1

"z-index:1"を "z-index:-5000"に変更すると、実際に動作します!:)ありがとう!:) – StepUp

-1

それを使用する正しい方法は:

body { background-image:url(image.png) no-repeat center top;} 
関連する問題