背景の中央に画像がありますが、メインの背景色が画像と同じくらい伸びて中央にとどまるようにする必要があります。
ボディ背景のCSSはこちら
body{padding:0; margin:0; background:url(/b.jpg) center 10px no-repeat;}
メイン背景のcssはこちら
.main{background:#4e4645;}
バックグラウンド ポジションとマージン パーセントを試してみましたが、うまくいきませんでした。
ボディ内で divmargin: 0 auto
を中央に配置するために使用できます。.main
次に.main
、幅をボディの背景画像の幅と等しくなるように設定するだけです。
.main {
margin: 0 auto;
width: 300px;
background: #4e4645;
}
デモを参照してください。
これはあなたが達成しようとしていることですか?
この例では、2つの背景色を使用しており、明らかに画像を置き換えています。内側のdivに50%の不透明度を設定して、両方のサイズが正確に一致していることを示しています(1つのブロックは明るい緑、もう1つは赤、だから色が混ざります)。
2つの背景が同じサイズで、正確にオーバーレイされています。
HTML:
<body>
<div class="outer_div">
<div class="inner_div">
</div>
</div>
</body>
CSS:
.outer_div {
width:50px;
margin:0 auto;
height:50px;
background-color:#dd0000;
}
.inner_div {
background:#00dd00;
width:100%;
opacity:0.5;
height:100%;
}