固定された位置を中心としたオーバーレイのCSSの最小幅

Question

コンテンツはページの中央にmargin：autoを使用して配置されているページがありますが、同じ方法で中央揃えされたバックグラウンドを追加したい私が下にスクロールすると、背景が表示されません。私は位置を使用することに頼っています。

しかし、左：x％と余白 - 左：-y％で再生することは悪夢であり、決してすべての画面解像度ではうまくいかないため、コンテンツと同じ方法でコンテンツを配置することは大きな課題です。

マークアップは単純です：私は多くの組み合わせを試してみた

.overlay 
{ 
    position: fixed; 
    top: 0; /* These positions makes sure that the overlay */ 
    bottom: 0; /* will cover the entire parent */ 
    left: 0; 
    width: 72%; 
    margin-left:14%; 
    height:100%; 
    background: #000; 
    opacity: 0.45; 
    -moz-opacity: 0.45; /* older Gecko-based browsers */ 
    filter:alpha(opacity=45); /* For IE6&7 */ 
} 

：

<div id="main" class="container"> 
    <div class="overlay"></div> 
    <div id="content"></div> 
</div> 

あなたは私が思いついたBEST CSSの設定はこれですサイトHERE

を見ることができますバックグラウンドは常にコンテンツとは異なってサイズが変更されており、私はそれを適所に残しておきたいと考えています。 ポジション：マージンを使用した絶対：あなたが下にスクロールするときを除いて、autoは完全にうまくいきます。

上記の設定は、「最小幅」を除いてうまく機能します。ある点の後に最小化を止めることができれば、これは完璧です。あなたはこの

Answer 1

への解決策を持っている場合は、事前に

多くのおかげであなたの代わりにスタイリングの目的のために空のマークアップを使用するのでは、あなたの背景のためのbackground-attachment: fixedを使用することができます。このようにして、ページをスクロールしているときでも表示されます。