- ベストアンサー
firefoxで部分的に背景色が反映されない。
CHI-512の回答
- CHI-512
- ベストアンサー率69% (63/91)
こんにちは。時間がないので手短に。 ボックスの順番はどうなってますか？ 下のような順番で試してもだめですか？ <div id="container"> <div class="left"><p>左</p></div> <div class="right"><p>右</p></div> <div class="center"><p>中央</p></div> </div>
関連するQ&A
- macのsafariとFirefoxで背景が表示されない
bodyとcontainerで背景をリピートさせています。 WindowsのIE6、IE7、Firefoxでは背景は正常に表示されるのですが、macのFirefoxとsafariでは背景がまったく表示されません。 どうしたら表示されるか、どなたかお教えいただけませんでしょうか。 body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; text-align:center; } #container { width:776px; margin:0px auto; background-image:url(main.gif); background-repeat:repeat-y; text-align:left; }
- ベストアンサー
- CSS
- 背景リピート―反映されない
背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about { background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。
- ベストアンサー
- その他([技術者向] コンピューター)
- Firefoxで背景画像が表示されず困っています
サイトを作り確認してみたところ、 IEでは背景画像がきちんと表示されるのですが Firefoxでは表示されないようです。 下記のように入力しているのですが、何が原因なのかわかりません…。 詳しい方、教えていただけないでしょうか。 <!-- BODY { background-image: url(http://aaaaa.jpg); background-color: #ffffff; background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; } -->
- ベストアンサー
- HTML
- IE7で閲覧した際にCSSで配置した背景画像がずれる
スタイルシートにて、 以下のように設定して背景画像を表示させているのですが、 body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-image: url(../images/body_bg.gif); background-color: #FFFFFF; background-repeat: repeat-y; background-position: center top; } マックのsafari、firefox、WINのIE6、firefox等では問題なく センターに背景画像が配置されて表示されるのですが、 IE7で表示すると、横に余分な空白が生じて、 背景画像のみが左のほうにずれてしまいます。 おおよそですが、bodyの横幅が右に2倍に 増えている感じで、スクロールバーを右に動かすと、 意味のない空白ができています。 IE7のハックというものを使用して、上記のbodyタグの下に 背景画像の設定を外した、下記の記述を追記し、 さらに、.bodybgというクラスタグで 背景画像を設定してみたのですが、結果は同じでした。 *:first-child+html body { font-size: 70%; line-height: 140%; word-spacing: 1pt; margin: 0; padding: 0; text-decoration: none; text-align: center; letter-spacing: 0.1em; background-color: #FFFFFF; } *:first-child+html .bodybg { background-image: url(../images/body_bg.gif); background-repeat: repeat-y; background-position: center top; } どうしたら、背景画像のずれが直るのでしょうか？ また、このバグはbodyタグではなく、その他のスタイルが 影響しているのでしょうか？ どなたかご存知の方お教え願えませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
- Firefoxのみ下に空白が出来るバグ
背景を２枚使用し、それぞれ上と下に固定して、本文がのびると真ん中（画像のない場所）がのびるようにしたいのですが、 Firefoxのみ、下の画像に空白ができて埋まりません。 画像は、bodyに下の画像を、containerに上の画像を入れています。 いい方法はないでしょうか？ ----html------------------ <html> <body> <div id="container"> </div> </body> </html> ---css------------------ body{ background-image:url(../images/back_01.jpg); background-repeat:repeat-x; background-position:bottom; margin:0 auto; height:100%; } div#container { background-image:url(../images/back_02.jpg); background-repeat:repeat-x; width:100%; height:100%; margin:0 auto; text-align:center; } ちなみにhtmlにcssでheight：100％などを入力すると、画像が消えて表示されなくなります。 よろしくお願いします。
- ベストアンサー
- CSS
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- ＣＳＳで背景にグラデーションをかけたいけどできません。
filter: progid:DXImageTransform.Microsoft.Gradient (StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) これをcssファイルのbodyのところに下記のように 付け加えたのですが反映されません。 BODY{ font-style:normal font-weight:normal font-size:small text-align:center;/ color:#000000 filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#000099, EndColorStr=#ffffff, GradientType=0) } 元は背景色と背景画像が指定してあった部分 background-color:#ffffff;/ background-image:url(./img/back.gif);/ を消してそこに入れたのですがそれは問題ないですよね？ 教えてください、お願いします。
- ベストアンサー
- CSS
- IE6で、背景画像とコンテナを常に中央表示させたい
bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> <div id="container"></div> </body> ●CSS body{ background: url(画像のパス) no-repeat; background-position: center top; text-align: center; } container{ width: 900px; margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。
- ベストアンサー
- HTML
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
補足
はい、ボックスの順番は container left right center footer です。 80%の幅内は、containerが一番下に存在するはずですよね。 であれば、floatさせたleftとrightのheightが短かろうが、その下にはcontainerの白背景が来るはずだと思うのですが。floatさせてなくて、left・center・rightが横に3つ並んでいるだけなら、center部分だけが白背景なのは理解できます。でも、floatさせてるのに・・・ 自分でも色々調べていますが、いまだ解決策見つからず、です（泣）。