2012-02-09 10 views
0

上backimage問題は、私は画像やHTML

body { 
background: url('ocean.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
background-size: 100%; 

    } 

ocean.pngは、画面全体をいっぱいにしている体を持ってそれから私はその上に別の画像をロードします。

<body> 
     <img src="image/bubble/bub0.png" name="bubble" width="100" height="100" alt="bub"> 

しかし、その代わりの画像bub0が、それは空白の左上の最上部部分と全体の海の背景画像上に後身頃画像よりも高いZまで示してきたが下方にシフトしてしまいました。私は、bub0の画像を海洋バロック画像に重ねて、より高いzオーダーを持たせたいと思います。

+0

背景イメージは、要素ではないバックグラウンドであるため、常に最下部に表示されます。多分私はあなたが望むものを理解していないでしょう。サンプルページ、何か、またはいくつかのスクリーンショットがありますか? – Nathan

答えて

3

あなたはposition: fixed;同様

img[name="bubble"] { 
    position : fixed; 
    top  : 0; 
    left  : 0; 
    z-index : 2; 
} 
+0

大丈夫です、真ん中の真ん中に気泡画像を入れるとどうなりますか? – lilzz

+0

'top'と' left'px値を更新するだけです。 – Maverick

1

背景画像がどんな底に常にできなくなりますそれを与える必要があります。 Zインデックスはこの問題とは関係ありません。

バックグラウンドサイズのプロパティは、すべてのブラウザでサポートされているわけではありません。したがって、100%に伸びることはありません。 background-sizeプロパティはIE9 +、Firefox 4+、Opera、Chrome、およびSafari 5+でサポートされています。

私は画像ocean.pngが中央に位置していると考えています。実際にはページ全体が覆われているわけではありません。