背景画像の配置問題

Question

私はこれを私のCSSスタイリングとして持っています。私の#pg_wrapは、ブラウザウィンドウのサイズが変更されたときに、背景イメージをセンタリングしません。私が持っているスクリーンショットは、幅が#pg_wrapよりも1344px未満のブラウザーウィンドウを縮小したときです（幅はそれだけでなく、テスト番号でした）。

スクリーンショットはFirefoxで撮影されました。クロムはこれをしません。バックグラウンドイメージを置くにはどうしたらいいですか？

Chrome

Firefox

body 
{ 
    text-align: center; 
    background-image: url('p_bg_75.jpg'); 
    background-repeat: repeat-y; 
    background-color: black; 
    background-attachment:fixed 
    margin: 0px; 
    padding: 0px; 

} 
#pg_wrap 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 1344px; 
    height: 1000px; 
    border: 1px solid white; 
    text-align: center; 
} 

Answer 1

ブラウザは異なる方法で間違ったCSSを扱うので、違いがあります。

background-attachment:fixed; 

Answer 2

へ

変更

background-attachment:fixed 

あなたは、バックグラウンドの位置を宣言することを忘れていましたか？ text-alignは背景を揃えていないことに注意してください。

background: #000000 url('p_bg_75.jpg') repeat-y fixed top center; 

私はあなたが本当に添付ファイルを「固定」することにしたいんか、あなたの質問ではわかりませんが、あなたのスクリーンキャップに基づいて、私は疑問：1つの宣言として、それはあなたが後にしているように思えますそれ。だから、あなたはおそらくそれを宣言から取り除くこともできます。

Answer 3

上記のアドバイスとして、試してみてください。

background-position: center; 

と私たちはサファリ/ ChromeでテストできるようにHTMLのスニペットを貼り付けます。

Answer 4

通常、中央に位置するサイトでは、2つの背景画像を使用することをお勧めします。 1つの背景画像がBODY上に配置され、別の背景が中央に位置合わせされたDIV上に配置される。

例のように本文に余白がなく、ブラウザを1344pxより小さくすると、もう本文の背景が表示されません。コンテンツが短い場合、DIVに最低100％の高さを与えることができる奇妙な効果はないことを確認する。 http://www.prgs.nl/