- ベストアンサー
CSSでの背景の指定について教えてください。
背景がうまく指定できません。よろしくお願いします。 フォルダ（img)の中にbana(ファイル名）750×100のjpgの画像が置いてあります。 CSSの指定は #head{ width:750px; height:100px; background-color:#ffffff; background-image:url(../img/bana.jpg); border-bottom:#999999 solid 1px; } HTMLは <div id="head"> <h1>・・・・・・</h1> </div> です。色々と試してみたのですが、背景が入ってくれません。 初心者ですので説明不足かもしれませんが よろしくお願いします。
- kamonegi2005
- お礼率36% (68/187)
- ホームページ作成ソフト
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
長くなりますが、確認も兼ねてファイル構成とソースを書いてみます。 ■Aフォルダ ├ index.html (Aフォルダ内に入っている) │ ├ ■imgフォルダ │ └ bana.jpg (Aフォルダ内のimgフォルダに入っている) │ ├ ■cssフォルダ │ └ index.css (Aフォルダ内のcssフォルダに入っている) ●index.htmlの内容 <div id="head"> <h1>・・・・・・</h1> </div> ●index.cssの内容 ※ファイル名はこちらで適当につけました #head{ width:750px; height:100px; background-color:#ffffff; background-image:url(../img/bana.jpg); border-bottom:#999999 solid 1px; } 構成と各ファイルの内容は、上記でよろしいしいのでしょうか？ 上記で試してみましたが、IEでは問題なく表示されています。(IE以外では未確認) CSSファイルの呼び出しタグに間違いはありませんか？ 念のため、下記のように記述してあるか確認してみて下さい。 ※これ↓は「<head>」と「</head>」の間に記述します。 <link rel="stylesheet" type="text/css" href="css/index.css">
その他の回答 (5)
- torayoshi
- ベストアンサー率62% (910/1449)
ちょっと気になったので… 一つ階層の深い外部CSSを読み込んでますよね。 そのあたりの位置関係はどのようになってますか？ まぁ、間違ってないとは思いますが、念のため。
お礼
お礼が遅くなりました。回答ありがとうございます。 みなさまのお陰で解決できました。本当にありがとうございました。 ちなみにこのように修整したらできました。 background-image:url(img/bana.jpg);
- naokita
- ベストアンサー率57% (1008/1745)
＞css（フォルダ） とコメントされていますが、 CSSテキストのリンク先は正しいですか？ これが間違っていては、全て適用されません。 h1のdiv部 border-bottom:#999999 solid 1px; や他のCSS指定部が反映されていなければCSSリンクの問題。 試しに画像も <img src="../img/bana.jpg" width="750" height="100"> で空きスペースに表示してみましょう。
お礼
お礼が遅くなりました。回答ありがとうございます。 みなさまのお陰で解決できました。本当にありがとうございました。 ちなみにこのように修整したらできました。 background-image:url(img/bana.jpg);
- ame-sanc
- ベストアンサー率32% (152/467)
絶対パス（http://・・・/img/bana.jpg）ではどうなるのでしょうか？ 反映されるなら、階層関係 反映されないなら、指定・ファイル名 という感じで絞れるかもです。 絶対パスでかまわないのであれば、そのままでも・・。
お礼
お礼が遅くなりました。回答ありがとうございます。 みなさまのお陰で解決できました。本当にありがとうございました。 ちなみにこのように修整したらできました。 background-image:url(img/bana.jpg);
- mazimekko3
- ベストアンサー率38% (74/194)
ちゃんと背景画像写るんですけど。 一応 url('../img/bana.jpg') と「'」で囲ってください。 画像ファイルの大文字小文字の区別つけてますか？ 画像ファイルの階層はあってますか？ 同じ階層にimgフォルダがある場合 background-image: url('./img/bana.jpg'); ですよ。
お礼
ありがとうございます。背景が写るのですか？うん～何故、私のはうつらないのでしょう？画像ファイルの大文字、小文字は確認しました。 階層はあっています？ちなみにAのフォルダの中にindex.htmlとcss（フォルダ）とimg（フォルダ）があります。教えて頂いたurl('../img/bana.jpg') ・background-image: url('./img/bana.jpg'); 2つとも出来ませんでした。難しいですね・・・
- chappi333
- ベストアンサー率34% (31/91)
ディレクトリ構成はあってますよね？ WWWというディレクトリの中にindex.htmlとして上記が書いてあり、 WWWの中にimgのディレクトリがあってbana.jpgが入っている場合は、 background-image:url(./img/bana.jpg); になります。
お礼
ありがとうございます。ディレクトリと言うものが良くわかりませんがあっているとおもいます。background-image:url(./img/bana.jpg);でも試して見ましたがダメでした。
お礼
お礼が遅くなりました。回答ありがとうございます。 みなさまのお陰で解決できました。本当にありがとうございました。 ちなみにこのように修整したらできました。 background-image:url(img/bana.jpg);