スタイルシートで、背景画像が表示されない

質問

スタイルシートで、背景画像（header.jpg'）を設定してるのですが表示されません。

　---　style.css
　　　　newpage5.html

　---　ｉｍｇ　┐
　　　　　　　header.jpg

スタイルシートは

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;

ホームページビルダーでは、簡易表示されてるんですが
アップロードすると、画像が表示されないのですが・・・

以上宜しくお願いします。

回答No.1

naokita · ベストアンサー

＞ｉｍｇ
半角小文字や/img/ディレクトリで間違いなく、
また、border-bottom: 1px solid #FF9900;が表示されてるなら外部CSSは問題ないので、

絶対パスで画像だけ表示してみる。
http://www.○○.com/img/header.jpg

HTMLファイル内の適当な所に表示してみる。
<img src="img/header.jpg" width="200" height="200" />

style属性で書いてみる。
<div style="width: 200px; height:200px; background: url(img/header.jpg);">テスト</div>

↑このセレクタを #idや.class で適応してみる。
<div id=" ">テスト</div>

別の表示可能な画像.jpgと入れ替えてみる。

別の名前で新規保存して表示してみる。

これらで原因がわかれば、対処もできますが、
単なる記述ミスの場合が多いのでは・・・

お礼

スタイルシートを見直したら、
最初の方に、余計なタグを入れてたので
バグ（？）の為に、表示されない結果でした。

単なる記載ミスとヒントをくれてありがとうございます。

回答No.3

神崎 渉瑠（@taloo）

画像ファイルをアップロードされましたか？

回答No.2

abacabu

30代男HP初心者です。
まずHP作成ソフトって記述がでたらめになるケースがあります。
なのでプロですとザクっとつくってその後タグを編集します。
・・・という事を踏まえて
そのCSSタグはどの部位にたいして設定してますか?
body{この中に書いてますか？｝
それともこのかっこの外が何になってるかで何に対して設定しているかとなります。

---　style.css
　　　　newpage5.html　←まさかこれがCSS外部データとかではないですよね
　　　　　　　　　　　　　　　　　CSSの場合は拡張子も.CSSです。　
　---　ｉｍｇ　┐
　　　　　　　header.jpg

ちなみに↑何ですか??

border-bottom: 1px solid #FF9900;
background-image: url('img/header.jpg');
padding: 20px;　　←ここが問題かもしれません…
この画像を背景にという事ですが全体に表示させるだけですかね??
それとも所定の位置に表示したいんですかね??
padding:20pxが何をしたいのかに依るんですが…
表示位置を指示する場合は
background-position-x:"例です"20px又は20%;
background-position-y:50px又は50%;
等写真画像の場合はx軸とｙ軸を指定します。
header部分にという場合はHTMLでヘッダーを定義している場合において
header｛
　　　　　border-bottom: 1px solid #FF9900;
　　　　　background-image: url('img/header.jpg');
　　　　　padding: 20px;
　　　　　｝

とすればヘッダー部分にその画像が表示されます。
どういう状況かがいまいちわかりませんのでこんな感じで終わらせておきます。
ちなみに…これ外部CSSでーたですかね？
只ヘッダー部分に画像を貼りたいだけで、
かつ、HTML内部にCSSを記述しているなら、なんでかんでCSSでなくて
HTMLで貼ったほうが文字数制限でその分軽くなるかと…