- ベストアンサー
macのsafariとFirefoxで背景が表示されない
readordieの回答
- readordie
- ベストアンサー率57% (66/115)
background-image:url("bg.gif"); のようにダブルクォーテーションで囲んでみてはどうでしょうか
関連するQ&A
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- 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
- Firefoxだけ文字の大きさの制御がきかないんです。
全体的なテキストの大きさは指定せずに、h2だけ大きさを指定しました。 tdに.menuBarBgを、h2に.menuBarのclass指定したところがあります。 IE6、NN7.2では大きさは制御されているのに、Firefoxではブラウザの「文字サイズ」を大きくすると、それなりに大きくなって、TDからはみ出てしまいます。 ほかのh2は変っても特別問題ないのですが、tdにバックイメージの画像を入れているので、はみ出すととってもおかしいんです。 どのようにしたら良いでしょうか。 body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-image: url(images/bg.gif); background-repeat: repeat-x; background-color: #FFFFFF; } h2{ font-size: 16px; color: #333333; text-align: left; padding: 0; } /* News title */ .menuBarBg{ background-image: url(images/menubg.gif); background-repeat: no-repeat; } .menuBar{ text-indent: 35px; margin: 0; padding: 6px; }
- ベストアンサー
- HTML
- スタイルシートをFirefoxでもうまく表示させるには・・・
スタイルシートでセルに背景を指定しています。 Left{ color : white; background-repeat : no-repeat; background-attachment : fixed; width : 208px; font-size : 12px; font-weight : bold; text-align : center; background-image : url(.gif); } IEではその背景はうまく表示されるのですが Firefox ではその背景は表示されません。 その原因を色々なサイトで調べてみましたが明確な対処方法が見つかりません。 セルの背景をスタイルシートで指定してFirefox でもうまく表示させる方法を教えて下さい。
- 締切済み
- その他（インターネット・Webサービス）
- IE,Firefoxでbodyの背景画像が表示されません。
IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width や position をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- 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
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- 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
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
お礼
書き込みありがとうございます。 フォルダの中のファイルを大文字から小文字に直すことで解決しました。 CSSをダブルクォーテーションで囲んでも正常に表示されていました。