- ベストアンサー
CSSによる背景画像のセンタリング。IE以外ではうまくいかない
背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外（firefoxなど）は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか？ よろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
バグなのか何なのか…、Geckoはどうも1.8系から解釈が変わったようですね。 background-attachment:fixed;を指定しないと縦幅を取得しないみたいです。 つまり縦幅が分からないから相対値指定でわけの分からない位置指定になる、ということ。 問題はbackground-attachment:fixed;の指定か、background-positionの縦位置を絶対値で指定することにより解決します。 尚、Opera9で確認したところ解釈はほぼ同様でした。
その他の回答 (1)
- kancil
- ベストアンサー率27% (26/95)
対策として、これではどうでしょうか？ bodyに直接背景を指定するのではなく、DIVに記入します。 例） <body style="margin:0"> <div style="background-position:center;background-repeat: no-repeat;background-image:url(xxx.jpg);width:100%;height:100%;"> aaa </div> </body>
お礼
御返答ありがとうゴザイマス。 この方法でも背景画像はセンターに来てるみたいですが、手前のボックスに対しての重なりが今度は崩れるみたいでした。divの書き方の問題でしょうか。 問題解決いたしました。ありがとうゴザイマス。
お礼
ありがとうございます。 background-attachment:fixed;を追加したら一発でセンタリングされました。