cssとhtmlについて

質問

cssとhtmlについて

cssの方にbackground:url(.....);
で打ち込んだhtmlの直下に<img src="..." />
とバックグラウンドで指定した画像のさらに上に画像を設置しようとしたら、
<img src>の方の画像が読み取れませんでした。
これはなぜなんでしょうか？？

解決策をご教授ください。

回答No.4

ponta1971 · ベストアンサー

>No.2です。

今度はソースをじっくりみてみたのですが、スタイルシートのセレクタがダブっているのはなにか理由があるのでしょうか。

#front_center div.contents02
このセレクタが3つのスタイルシート全てに含まれています。

div.cont01
このセレクタが下2つのスタイルシートに含まれています。

書かれていたソースを使用して試してみたところ、私の環境ではimgの画像のみ表示され、背景は表示されませんでした。

1つ目のスタイルシートのセレクタを「div.contents02」2つ目を「div.cont01」3つ目を「div.cont_top」だけにしたところ、背景、imgの画像ともに表示されました。

スタイルシートの作りを確認してみてください。

お礼

3度目の回答大変ありがとうございます。
あれから試行錯誤を重ねたところ、問題の画像がWebインスペクタで表示すると、text/html扱いになっていました。
そこで違う画像をアップロードしたところ、無事表示され、インスペクタでも、image/pngと正しい形式になっていました。
写真に問題があったのでしょか、、

スタイルシートにおなじセレクタを含ませているのは、階層の指定がごっちゃにならないようにしているのですが、もし逆にわかりにくかったり、エラーがでてしまうなら、これからNO.2さんの言う通りにしてみたいと思います。

何度もご回答いただきありがとうございました。

これにて、回答を閉めさせていただきます。
NO.2さんをBAとさせていただきます。

回答No.3

ponta1971

No.2です。
補足のソースを見ました。

css、htmlともに画像の指定に拡張子が無いのですが、背景画像は表示されているのでしょうか?
とりあえず、両方とも拡張子まで記述してみてください。

それでも改善しない場合、画像ファイルの名前が数字から始まっているor数字のみですが、数字で始まらないようにしてみてください。
理由は忘れたのですが、数字で始まる名称のフォルダやファイル名を使用すると、動作がちゃんとしない場合があります。（JavaScript以外は関係なかったかもしれません）

お礼

2度目のご回答ありがとうございます。
おっしゃられたとおり、画像ファイルの拡張子をつけるのと、アルファベットにする、数字を消すなどを実施しましたが、残念ながら解決しませんでした。
なぜなのか未だにわからず悪戦苦闘してますが、がんばります。
わざわざありがとうございました。

回答No.2

ponta1971

実際のソースを書いてもらわないと、イマイチどのような状況か分からないですね。

ざっと考えられるのは、src部分のファイル名のスペルミスとか画像のアップ漏れとか、相対パスにしていて指している場所が違うとかでしょうか。

/はあってもなくても表示はされたと思います。

補足

失礼しました。
ソースは
<!-----html------->
<div class="contents02">
<div class="cont01">
<div class="cont_top">
<a>
<img src="img/01">
</a>
</div>
</div>
</div>

<!----css------>
#front_center div.contents02{
color:#ffffff;
background-color:#ffffff;
background-position:top;
width:900px;
height:1655px;
padding:0px;
margin: auto;
font-size:0px;
clear:both;
}
#front_center div.contents02 div.cont01{
background:url(img/05lnR);
background-repeat:no-repeat;
width:900px;
height:401px;
margin: auto;
}
#front_center div.contents02 div.cont01 div.cont_top{
width:630px;
height:417px;
padding-top:38px;
}

です。

回答No.1

aky_nil

/って必要ですっけ・・・?

お礼

ご回答ありがとうございました。
未だ解決にいたっていませんが、続きを頑張りたいと思います。