ヘッダーイメージが表示できない問題の解決方法

前へ 次へ
このQ&Aのポイント
  • Wordpressでヘッダーイメージが表示されない問題が発生しています。
  • スタイルシートの記述を変更し、Firefoxでは表示されるようになりましたが、インターネットエクスプローラーでは表示されません。
  • 問題が解決するためには、さらなる修正が必要な可能性があります。
回答を見る
  • ベストアンサー

ヘッダーイメージが表示できません。

Wordpressでの質問です。 スタイルシートのところで、「#header-outer{background :url(images/aaa.gif)repeat-x...」のところを「#header-outer{background :url(images/bbb.jpg)no-repeat」に変更しました。 Firefoxでは表示されますが、インターネットエクスプローラーだと表示できません。 表示する方法はありませんか？ Firefoxのバージョンは3.05。 なおDSiのOperaでも表示できます。 インターネットエクスプローラーは自宅がVer.7、職場がVer.6ですがどちらも表示できません。 WordpressはVer.2.7。 「SpotOnSEO-Red」というテーマを使っています。 テーマファイルの中に「image」というフォルダーがあって、そこに画像ファイルを入れてアップロードしました。 Firefoxでは表示しているので、手順は間違ってないと思っていますが、両方で表示させるには、さらにどこか修正しなければならないのでしょうか？ よろしくお願いします。

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

  • ベストアンサー
  • hitsumari
  • ベストアンサー率63% (7/11)
回答No.1

CSSの指定が正式に記述されてないのが原因ではないでしょうか？ #header-outer{background :url(images/bbb.jpg)no-repeat ではなく、以下のようにしてみて下さい。 #header-outer{background-image:url("images/bbb.jpg");background-repeat: no-repeat;}

Fuu1962
質問者

お礼

回答ありがとうございます。 そのとおりにやってみたところ、表示できるようになりました。 あらっ、と思ってhtmlの本を見返してみたんですが、そのようになってましたね。 「正しく書く」というのがたいせつなんですね。 なんだか基本的なところを忘れていたようです。 たいへんありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • 複数指定の背景が表示されない

    困っているのでどなたかお力添えをお願いします。 htmlとbodyにそれぞれ別の背景画像を指定しているのですが、 IE6でのみ片方の背景が表示されません。 html { background: url(../images/bg.jpg) repeat center bottom; } body { background: url(../images/header-bg.jpg) repeat-x center top; } どうすれば表示されるようになるでしょうか？ divを使う背景画像の複数指定が上手くいかなかったのでこのやり方をしています。

    • ベストアンサー
    • 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);

  • 背景イメージの重ね表示

    こんにちは。 MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。 例えば以下のようなかんじです。 <style type="text/css"> .bg { 　background-position: left; 　background-repeat: repeat-y; 　background: url("./img/bg.gif"); } .fg { 　padding-bottom: 100px; 　background-position: bottom; 　background-repeat: no-repeat; 　background-image: url("./img/fg.gif"); } </style> 　　　　　　： 　　　　　　： <!-- ▼サイドバー▼ --> <div class="bg"> 　　<div class="fg"> 　　　　　　： 　　　　　　： 　　</div> </div> <!-- ▲サイドバー▲ --> IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。 サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。 よろしくお願いします。

  • CSSのbackground-imageが表示されません

    CSSのbackground-imageが表示されません 恐れ入ります。現在CSSを勉強しつつサイトを作成しているのですが 2カラムの枠組みにて containerボックスの中にsidewrapとmainwrapを配置し、 サイトを表示してみるとcontainerボックス中にて設定をしたbackground-imageが表示されません。 確認は以下のブラウザにて確認してみました。 ○background-image表示されない 　・firefox(最新ver) 　・IE8 ○background-imageが表示される 　・IE6 いろいろ試してみた所mainwrap中のfloat: rightをコメントアウトしたら IE8等でもbackground-imageが表示されるみたいなのですが・・・ 解決法などご存知の方がいらっしゃいましたらお教えいただけませんでしょうか。 CSSの設定は以下のようになってます。 #header{ width:800px; background-color:#ffffff; } #container{ width:800px; background-image: url(img/back.jpg); background-repeat: repeat-y; } #sidewrap { width: 190px; float: left; margin: 0px auto; text-align: left; } #mainwrap { width: 600px; float: right; text-align: left; } #footer{ clear:both; width:800px; text-align: center; border-top: 3px solid; border-bottom: 1px solid; } 以上 よろしくお願いします。

    • ベストアンサー
    • HTML
  • Lightbox2.0にてnext、prev画像が表示されない

    タイトル通りなのですが、ホームページにてLightbox2.0を使用しているのですが、next、prev画像が表示されません。 パスを変更してclose、loading画像は表示できたのですが、他に変更するところはあるのでしょうか？ lightbox.cssにて #prevLink:hover, #prevLink:visited:hover { background: url(/images/nextlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/images/prevlabel.gif) right 15% no-repeat; } こちらにてパスを変更しましたがIE、Firefoxどちらとも表示されず・・・ どうすれば表示できるのでしょうか？

  • cssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります

    いつもお世話になっております。 以下の様にcssを組みました。 〔ｃｓｓ〕 @charset "UTF-8"; #bnn0513 span { display:none; } #bnn0513 a { display:block; width:212px; height:102px; padding:0; background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:link { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:visited { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:hover { background-image:url(images/sample_ov.gif); background-repeat:no-repeat 0 0; } #bnn1 a:active { background-image:url(images/sample_on.gif); background-repeat:no-repeat 0 0; } 〔xhtml（一部）〕 <div id="bnn0513"> <a href="sample.html"><span>サンプル</span></a></div> CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。 一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。 一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか？ java等他のプログラミングが入っても構いませんので方法をご教授ください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • livedoorブログのヘッダの変更のしかた・・・

    livedoorブログのヘッダの変更のしかた・・・ livedoorブログをはじめて、カスタマイズをしようと思って、livedoorブログカスタマイズのしかたなどが載ってるサイトをいろいろ探してみたのですが、サイトに書いてある、CSSと、はじめのlivedoorブログのカスタマイズの変更で見たCSSが全然違います。 ヘッダ画像の変更などは サイトに書いてあるのは body{ margin:0; padding:0; color:#d7d3c4; background:#000 url(http://image02.wiki.livedoor.jp/img/usr/gothic/header.jpg) no-repeat center 20px; font-size:80%; } こんなのや他にもいろいろありますが、livedoorのカスタマイズではじめのCSSを開いてタイトルエリアを見ても div.blog-title-outer { background: #dedede url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ text-align: left; margin-bottom: 10px; padding-right: 10px; } div.blog-title-outer-2 { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat;/* 背景画像：左上 */ padding: 10px 0 0 10px; } div.blog-title-outer-3 { background: #63abec url() no-repeat;/* 背景画像：左上 */ } h1#blog-title { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat right top;/* 背景画像：右上 */ margin: 0; padding: 35px 30px 0; font-size: 150%; font-weight: bold; } div.blog-description-outer { background: url(http://livedoor.2.blogimg.jp/kio_kiriya/imgs/8/7/877e770f.jpg) no-repeat bottom left;/* 背景画像：左下 */ } p#blog-description { background: url() no-repeat bottom right;/* 背景画像：右下 */ margin: 0; padding: 10px 30px 35px; line-height: 135%; } こんなので背景画像右下や左下・・・ これすべてにアップロードした画像のURLをいれてもちゃんと背景になりません。 どうすればいいのでしょうか？

  • 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
  • h1にタイトル画像を指定しているのですが・・

    h1にテキストでは、ページのタイトルを入れて、CSSで背景を指定しています。 【HTML】 <div id="header><h1>タイトル</h1></div> 【CSS】 #header h1{ text-indent: -9999px; background-image: url(../images/share/title.gif); background-repeat: no-repeat; height: 43px; width: 317px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; text-align: left; } FirefoxとIEでは表示されているのですが、Operaで見ると表示されていません。Operaで表示させることは難しいのでしょうか？

  • WindowsのFirefoxでの背景画像の表示（CSS）

    WindowsのFirefox（Ver.2.0.0.12）での背景画像の表示について質問です。 下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。 他のブラウザでは上手くいくのですが、原因がわかりません。 Dreamweaverで作っております。 body { background-image: url(img/site/bg.jpg); background-repeat: repeat-x; background-position:bottom; background-color: #826243; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する