css - ページを埋めないdivのフルサイズで背景画像を設定する方法

Question

次のように、divの背景に画像を中央の位置に配置する必要があります。

私が試したことは次のとおりです。

<div id="container">
    ...
</div
<div id="background">
    <img src="images/bg.png"/>
</div>

このCSSで：

div#container {
    margin: 0 auto;
    width: 52em;
}
div#bg img {
    z-index: -999;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 22%;
}

私のブラウザでは、画面サイズを 22% に設定して問題ありませんが、サイズの異なる別の画面で試してみると、背景画像が div の中心にありません。私に何ができる？誰かが私を助けることができますか？

Answer 1

与える

position:relative;

コンテナdiv..それは動作するはずです..そして、背景のdiv（with position:absolute;）はコンテナdivの子でなければなりません..そうすれば、divの重複プロパティを取得するだけです

Answer 2

以下のようにcssを使用できます：

#sample
{
    background:url(bg_apple_little.gif) no-repeat center center;
    height:200px;
    width:200px;
}

& あなたの div は id="sample" になります。高さ、幅はあなたの条件によって変えることができます。

Answer 3

css3で使用できます#container { background-size: auto; }