背景画像表示について

2023/09/06 12:18

このQ&Aのポイント

CSSで背景画像表示ができない問題が発生しています。
IE以外のブラウザでは背景画像が表示されていません。
背景画像の表示について、正しいCSSの記述方法を教えてください。

ベストアンサー

背景画像表示について

2015/09/15 12:56

CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。なので <div style="width : 1300px; 　　　　　height : 1000px; 　　　　　top : 1px; 　　　　　left : 2px;position : absolute; 　　　　　background-image: url(****.gif); 　　　　　z-index: 1; 　　　　　visibility : visible; 　　　　　" id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが基本なはずの背景画像にブラウザによって表示が異なるのか、と。本を読んでもインターネットで調べてもそんなことはないとかいてありました。僕の記述が間違っているとしか考えられません。正しい記述を教えてください。ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

next56
お礼率12% (1/8)

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kawais070
ベストアンサー率52% (2242/4282)

2015/09/15 13:30 回答No.1

最初に書いたときに間違えてしまって、それがキャッシュされてしまい、修正したものが反映されないだけかも。 Firefoxのキャッシュをクリアしてみたらいかがでしょうか。

関連するQ&A

CSSで子ボックスに背景画像を設定してもNN7.01で表示されない
例えば、下記のように記述して「pagebody」ボックスで「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとpagebodyのボックスに背景画像が表示されません(><;) 先ほど締め切った質問で「wrapper」のボックスに背景画像を貼り付けようとしてうまくいかなかった件はアドバイスを頂き、CSSに下記記述を加え、 .clear { clear: both; } 回り込み解除<div class="clear"></div>を挿入することで解決しましたが、レイアウト上wrapperの子ボックスにあたるpagebody内に背景画像を設定しなければならなくなり、またドツボにはまりました(><;)(><;)(><;)(><;) /* 問題のhtml * / <div id="wrapper"> <div id="header"></div>　/* ヘッダー　*/ <div id="pagebody">　/* pagebody内2カラム　*/ <div id="content"></div> /* 右寄せ　*/ <div id="leftside"></div>　/* 左寄せ　*/ </div> <div class="clear"></div> </div> /* 問題のcss * / #pagebody { padding: 0; margin-top: 4px; background: url(img/bodybg.gif) repeat-y;} 前回と同じような質問ですが、状況が変わってきたので仕切り直しました。すみませんがどなたか教えて下さい・・・ｍ(_ _)ｍ
- ベストアンサー
- 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
背景画像上に複数枚の画像配置について
お世話になります。まだまだcss勉強中なので教えて頂きたいことがございます。１枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず余計な画像も出てきてしまいます。おそらく間違ったcssを記述していると思うのでご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い消してみたら画像が表示されなくなってしまったのでそのまま記載しています。上記の記述のままですと、マウスオーバーが正しく反応しないですしマウスオーバー時に別箇所に背景画像が表示されてしまいます。やりたいことは画像にしましたのでご確認ください黒○は背景画像内にある形で、その上に同じ形の赤○をマウスオーバー時の画像として表示したいです。（図が下手ですみません）わかる方、ご教示をお願いします。
- 締切済み
- CSS
Firefoxで背景が消えてしまう（スクロール時） min-height:100%
現在、下記のようにウェブページを作っています。 <div id="pagebody"> <div id="contents"> <p>aaaa</a> <p>aaaa</a> <p>aaaa</a> </div> </div> #pagebodyに背景を設定しrepeat-yで繰り返し指定をしています。しかし、Firefoxの場合スクロールすると背景が消えてしまいます。 html { height : 100% ; } body { height : 100% ; width : 724px ; margin : 0px auto ; text-align : center ; } body > #pagebody { height : auto ; } #pagebody { height : 100% ; min-height : 100% ; background : url (../img/bg.jpg) repeat-y center } ある程度調べ、上記のように書いても全く治らずです。アドバイスお願いします。
- ベストアンサー
- CSS
ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません
外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin:　0px auto; }
- 締切済み
- CSS
divの背景を高さ100%表示
以下のように、divをつかって背景色を設定した際、右のピクセル指定の背景は、スクロールバーが出た場合でも指定された高さまで背景色が表示されるのですが、左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。色々調べたのですが、過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。同じように試してみたのですが、思ったように表示がされません。指定している場所が間違っているのでしょうか？ <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
- ベストアンサー
- HTML
ドリームウィーバで背景画像が表示できない
デザインでは表示されているのですが、ブラウザで確認しようと思っても背景画像が表示されません。コードです。 <style type="text/css">  </style> </head> <body> <div id="contents"> <h1></h1> <h2></h2> </div> </body> </html> なにが原因なのでしょうか？教えてください。
- ベストアンサー
- ホームページ作成ソフト
CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。背景画像が表示されないくて困っています。他の方の質問で似た事例があったのと、情報サイトを見てみたのですがどうしても上手くいきません。この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。よろしくお願いいたします。
- ベストアンサー
- CSS
CSSで親ボックスの背景画像を設定してもNN7.01で表示されない
例えば、下記のように記述して「wrapper」ボックスで「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとヘッダー部分以外のボックスに背景画像が表示されません(><;) /* html * / <div id="wrapper"> <div id="header"></div>　/* ヘッダー　*/ <div id="pagebody">　/* pagebody内2カラム　*/ <div id="content"></div> /* 右寄せ　*/ <div id="leftside"></div>　/* 左寄せ　*/ </div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } CSSで毎回つまづくところですが、どうにもこうにも対処方法が見つかりません(T_T) どなたか力をかしていただけないでしょうか・・・
- ベストアンサー
- CSS