No.4ベストアンサー
- 回答日時:
>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
- 回答日時:
No.2です。
補足のソースを見ました。
css、htmlともに画像の指定に拡張子が無いのですが、背景画像は表示されているのでしょうか?
とりあえず、両方とも拡張子まで記述してみてください。
それでも改善しない場合、画像ファイルの名前が数字から始まっているor数字のみですが、数字で始まらないようにしてみてください。
理由は忘れたのですが、数字で始まる名称のフォルダやファイル名を使用すると、動作がちゃんとしない場合があります。(JavaScript以外は関係なかったかもしれません)
2度目のご回答ありがとうございます。
おっしゃられたとおり、画像ファイルの拡張子をつけるのと、アルファベットにする、数字を消すなどを実施しましたが、残念ながら解決しませんでした。
なぜなのか未だにわからず悪戦苦闘してますが、がんばります。
わざわざありがとうございました。
No.2
- 回答日時:
実際のソースを書いてもらわないと、イマイチどのような状況か分からないですね。
ざっと考えられるのは、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;
}
です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETでの縦・横スク...
-
CSSでDIVを複数囲むには
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
リストマーカーをボックス内に...
-
角丸画像の背景色を透明にした...
-
CSSのクラス名・ID名の指定でワ...
-
html の divとtable の役割
-
emとstrongの反対
-
ボタンをセル内一杯に表示させ...
-
中点「・」の改行について
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
htmlのolやulなどlistにtitleや...
-
idの中のid指定
-
NからZへの全単射を具体的に構...
-
htmlのid属性って必要なの?
-
HTML要素のid/class名の長さに...
-
imgタグをそのまま使うことは正...
-
水面の波紋
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordpressでキャプション内で改...
-
ASP.NETでの縦・横スク...
-
WordPressで画像を用いるときに...
-
js、 jQuery の手直しを助けて...
-
cssとhtmlについて
-
htmlだけで背景色を分ける方法
-
onMouseのイベントで…
-
どこをテーブルで作るべきか、d...
-
NN4.78が途中までしか読...
-
画像を少しだけ左に寄せる方法...
-
アマゾン画像に安定したキャプ...
-
TeX(LaTeX2e)で柔軟な枠線を...
-
掲示板を作成しておりアップロ...
-
HTMLタグで画像の中に文章を入れる
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
おすすめ情報