- ベストアンサー
IE6ブラウザへの対応で行き詰ってしまったので、ご意見をお聞かせください。
- IE6ブラウザへの対応で行き詰ってしまったため、ご意見をお聞かせください。
- ブラウザの横幅を広げた時に背景がずれないようにするための方法をIE6で実現することができません。
- CSSハックを使って、IE6だけpositionで要素をずらす方法も試しましたが、背景がずれてしまうため、他の良い方法を探しています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
bodyにはmarginが最初から設定されているから、ブラウザによって勝手に余白が入ってずれることがあります。 cssに margin:0 auto を足してbackground-positionを同じにしてちょっと書き換えれば解決するはずです。 background-position: center top; も入れたほうが良いかも。 ただし、bodyとdivは共にブラウザでセンタリング表示であると仮定した場合です。 （cssここから） body { background:url("./background1.gif"); background-position: center top; margin:0 auto; text-align:center; } #hoge { background:url("./background2.gif"); background-position: center top; margin:0 auto; text-align:center; width:300px; /* たとえば */ } （cssここまで） ※margin:0 auto; という表記は、 margin-left:auto; margin-right:auto; margin-top: 0; margin-bottom:0; を1行で書いたものです
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
NO.2 最後のところを訂正 whidth → width
- naokita
- ベストアンサー率57% (1008/1745)
サイドの背景を暗い画像に。昨日の続きですが・・・ ---------------- IE6で崩れるって事は、DTDスイッチで過去モードの可能性あり・・・ 更に、記述された、CSSだけで、センター配置すらならないし、 Firefox、IE、Chromeでもズレるはず。（CSS部分を省略したのだろうか？） 仮に、widthで幅を設定し、 センター配置にしてbody以下のpadding,marginを0にしたとしても、 backgroundでscroll left topなのだから、 ブラウザ幅を変更したら画像がズレるはず。 left topだから、背景はdivの開始位置から始まるのがルール。 だからdivが動けば画像も一緒にズレる。 ----------------------- 他にも方法があるが、 一番簡単な方法は、背景画像とdiv画像をセンター配置に統一すれば画像が一緒に移動。 body { margin:0;padding:0; background:url(./b1.gif) no-repeat center top; } #hoge { background:url(./b2.gif) no-repeat center top; margin: 0 auto; whidth: 600px; /* 幅は適当に */ }
補足
ご回答ありがとうございます。 No1の方に教えていただいた方法で今回は実装することができました。 ありがとうございました。
補足
ご回答ありがとうございます。 教えていただいた内容を使い、さらには背景をセンター表示にさせるために少し調整したら、 ブラウザの横幅を広げた時に期待する動作を得ることができました！！ ただ、一つ困ったことがあるのですが、画面に合わせてdivに設定した背景が縦位置のスクロールをしてしまうのです。 IE7、8、FireFox3.6、GoogleChlomeでは動かないのですが。。。 先の例には記述していないのですが、 background-attachment: fixed; の指定は行っています。 何が問題なのでしょうか…？