IEで背景画像が表示されない
- IEで背景画像が表示されない問題が発生しています。
- 検索して試した解決方法がうまくいかず、白色の背景が表示される状態が続いています。
- 解決のヒントをいただけると助かります。
- ベストアンサー
IEで背景画像が表示されない
【HTML部分】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あああああ</title> <link href="text.css" rel="stylesheet" type="text/css"> </head> <body> あいうえお </body> </html> 【CSS部分】 body { background-image: url("./img/back.jpg"); background-repeat: repeat; } Firefox系やchrome系では背景が表示されるのですが、IEでのみ白色となってしまいます。 検索してひと通りの解決方法を試してみましたがどれもうまくいかず…。 解決のヒントをいただけたらと思います。 よろしくお願いしますm(_ _)m
- senrim
- お礼率50% (2/4)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞("./img/back.jpg"); 部分をフルパスか、本体BODYに直接指定するかでどうですか？
その他の回答 (3)
度々すみません。NO.2～4の答えは全部私です。 訂正した際にCSSを内部に書いてしまったのをそのままにしてしまいました。 これが完全版という事で、NO.2とNO.3は無視して下さい。。。 どこが悪いのかというと、HTMLもCSSも抜粋的なソースかと思いますので、断定できませんでした。 IEだけうまくいかないという事でしたね。IEは悪く言えばバグが多く融通が利かない。よく言えば文法などに正確でうるさいブラウザです（良く言ってないか…）。それに対してFirefoxやSafari等は結構文法や書き方を間違えていても気を利かして思い通りに表示してくれます。下にちゃんと表示される（ハズ）ソースを書きました（勝手にHTMLは4.01のtransitionalにしちゃいました。）ので本当のソースと見比べてヒントにして頂ければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>あああああ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" media="all" href="text.css" type="text/css" /> </head> <body>あいうえお</body> </html> 【CSS部分】 @charset "UTF-8"; body{ background : url(./img/back.jpg) left top repeat; }
お礼
ありがとうございます。参考にいたします。
補足
HTML4.01では私の方でも既に表示が成功しております。ですが要望に対応してHTML5で書きなおしたところ、発生した問題なのであります。ですので質問文にあるソースの通りHTML5で記述しておりました。また質問文のソースは問題が発生する最小構成で書いたつもりです。元々の構成を書くと足りなくなってしまうので。
2か所ちょっとしたミスをしてました… こっちを使ってください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>あああああ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" media="all" href="text.css" type="text/css" /> </head> <body style="background : url(./img/back.jpg) left top repeat;">あいうえお</body> </html>
どこが悪いのかというと、HTMLもCSSも抜粋的なソースかと思いますので、断定できませんでした。 IEだけうまくいかないという事でしたね。IEは悪く言えばバグが多く融通が利かない。よく言えば文法などに正確でうるさいブラウザです（良く言ってないか…）。それに対してFirefoxやSafari等は結構文法や書き方を間違えていても気を利かして思い通りに表示してくれます。下にちゃんと表示される（ハズ）ソースを書きました（勝手にHTMLは4.01のtransitionalにしちゃいました。）ので本当のソースと見比べてヒントにして頂ければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>あああああ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="text.css" rel="stylesheet" type="text/css"> </head> <body>あいうえお</body> </html> 【CSS部分】 @charset "UTF-8"; body{ background : url(/img/common/maru1.gif) left top repeat; } P.S. ちゃんと表示されなかったら補足して下さい。責任を持って直します…
関連するQ&A
- ieでだけ背景画像が表示されません
internet explorerのすべてのバージョンにおいて、背景画像が反映されません。firefoxやopera、safariでは問題なく反映されます。 HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body background="haikei.jpg"> てすと </body> </html> CSS: body {font-family:"ＭＳ Ｐゴシック";background-image:url(haikei.jpg);background-repeat:repeat;} なにが問題なのかわかる方、教えてください。よろしくお願いします。
- ベストアンサー
- ブログ
- phpで これは、head要素の中に、meta要
phpで これは、head要素の中に、meta要素、title要素、link要素が入っているということなんですか？ ↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
- cssが読み込まれません。
VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }
- ベストアンサー
- HTML
- phpでこのイコールは代入演算子ですか？ <l
phpでこのイコールは代入演算子ですか？ <link rel="stylesheet" type="text/css" href="stylesheet.css"> ↑このイコールです link relにstylesheetを代入するという意味ですか？ ↓他にもたくさんありますが、このイコールは代入演算子なんですか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
- CSSで設定した背景画像がFirefoxだとズレて表示されます
以下のように、CSSを設定しました。 -- CSSの内容(抜粋) ------------------------------- H2{ color:#333333; background-image:url(img/title-01.jpg); background-repeat:repeat-x; padding:3px 25px; font-family:"Lucida Sans"; font-size:medium; } -- HTMLの指定 ------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="info-area"> <h2>いろはにほへと</h2> ←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている <div></div> <div></div> </div> <div id="main-area"> <h2>ちりぬるをわか</h2> ←大幅に上方にズレて表示される <div></div> <div></div> </div> …以下省略… CSSは外部読込にしてあり、HTML内には幅や高さ，色などを指定するタグは一切ありません。 問題の部分に到達するまでのタグは なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では 問題なく表示されています。 表示が崩れたFirefoxは3.0.11です。 Firefoxでも意図したように表示される方法はありますか？
- ベストアンサー
- 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
- 背景画像の折り返しをしたい
背景画像を横に折り返したいのですが、下のタグを打つと、ドキュメントウインドウでは表示されるのですが、ブラウザで見ると何も表示されません。 画像の格納場所は、あっているはずですが、どこが間違っているのかわかりません。。。 dreamweaver MX、ブラウザはIE6.0を使用しています。 手打ちで行ったのですが、DREAMWEAVERの操作でできるのであれば、その方法も知りたいです。 お手数ですがどなた教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>上のフレーム</title> <STYLE type="text/css"> <!-- BODY{ background-image:url(/img/top/line2.gif); background-repeat:repeat-x; } --> </STYLE> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
- CSSが読み込めません
今 HTML5とCSS3で個人のWebサイトを作成しており、 確認のためGoogleChromeにコピーして見てみましたが 外部CSSが全く反映されていません Windows8、保存している文字コードはどちらもUTF-8です <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta charset="UTF-8"> <meta name="keywords" content="〇〇"> <meta name="description" content="〇〇。"> <title>〇〇</title> </head> <body> <H1>〇〇</H1> <img src="〇〇.png"> </body> </html> CSS ソース↓ body ｛color: red; ｝ 何故こんな簡単なところでつまずいているのか自分でも分かりません どなたか分かる方いらっしゃいましたらご教授ください
- ベストアンサー
- CSS
- safariだけcssが反映されない
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？
- ベストアンサー
- HTML
お礼
フルパスで指定したところ、うまく表示されました。ありがとうございました！
補足
本体BODYに直接記載する方式はHTML5ではサポートされておりません。