Q&A
（質問文は編集できます）問題が再現するHTML/CSSを質問文に追記ください。
vscodeのエディタでHTMLとCSSのファイルを作りwebページを作成中、background-imageだけが表示されません。
webページ作成中divのクラスにCSSでbackground-imageを使っても設定した画像が表示されません。
検索して調べましたが解決策が見つからず投稿してる次第です。お願いします。
テキストエディタはvscodeです。
同じ画像ファイルはimgでは表示されるのですが、background-imageでだけ表示されません。
なのでパスは間違いないと思います。div要素の幅や高さなども調整しましたがダメでした。
CSS記載内容
.class { background-image: url("画像のパス"); }
試したこと
他の画像パスでも試す。相対パスと絶対パスをそれぞれ入れてみる。
他のHTMLクラスでも試す。background-colorなども試す→他は全て表示されます。
index.htmlの記載内容
<div class="curriculum">
<img src="my-img\sp_bg01.png">
<div class="curriculum-text">
<h4>一人ひとりの能力に合わせた</h4>
<h1>完全個別<span>の</span>カリキュラム</h1>
<p class="first">みちしるべでは、文部科学大臣賞を受賞した学習システムを導入しています。
次世代型のオンライン学習管理システムで、内容がわかりやすく学習し易いだけでなく、お子様の
学習到達度・進捗状況を分析し、確認し、管理することが可能です。それにより、「短期・中
期・長期」の目標設定が明確になり、個々のお子様に最適な学習プログラムを提案いたします。
</p>
<p class="second">お子様の個性に合わせた学習の進め方やその時点の学力に合わせた適切な難
易度を判別し、適度な負荷をかけながら成績の向上を目指していきます。</p>
</div>
</div>
stylesheet.cssの記載内容
.curriculum {
height: 550px;
background-image: url("my-img\orange.jpg");
}
ボックスの高さが潰れているのでは、と推測しています。
『他は全て表示されます』とのことですが、
・他の画像パスでも試す
.curriculum {
height: 550px;
background-image: url("my-img\sp_bg01.png");
}
→別の画像なら表示される
・相対パスと絶対パスをそれぞれ入れてみる
.curriculum {
height: 550px;
background-image: url("http://example.com/my-img\orange.jpg");
}
→絶対パスなら表示される
・他のHTMLクラスでも試す
.curriculum-text {
height: 550px;
background-image: url("my-img\orange.jpg");
}
→別のクラスの要素に背景をつけるなら、表示される
・background-colorなども試す
.curriculum {
height: 550px;
background: red;
}
→背景色は表示される
という理解で合っていますか？
つまり、この現象は
・この画像を
・.curriculum の背景として
・相対パスで指定した時
だけに再現する、ということで間違いありませんか？
この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。
画像のサイズはいくつですか？
私の説明が足りなくてすみません。
「他は全て表示されます」は、background-image以外はcssで適応されていますという意味です。
そしてこの記載しているクラスや画像に限らず相対パスでも絶対パスでも背景としては表示されません。
またどのクラスでも背景色は適応されています。
背景として表示されない画像もすべてimg要素としては表示されるのでパスの間違いではないと考えています。
またクラス要素にborderを表示して、クラスが潰れていないことは確認しています。
状況としては、表示されないのが不明ですね。
考えられるのは、ダブルクォートが全角になっていないか？全角文字があったりしないか？パスのダブルクォートを削除、等を確認してみてください。
デベロッパーツール等では、どのような状態でしょうか？他のCSSが適用されていませんか？
ダブルクォート等は問題なさそうです。
しかし1つ気づいたことがあります。
htmlファイル内の <img src="相対パスまたは絶対パス">
としている中のパスの部分をctrl＋クリックで画像が表示されますが、
cssファイル内で background-image :url("相対パスまたは絶対パス");
と記載し同じようにctrl+クリックをしてもエディタ上で「ファイルを開けません」と出るのですが
これが原因でしょうか？
パスの位置でしょうね。
ファイル構成はどうなっていますか？
HTMLファイルとCSSファイルが違うフォルダなら、パスは変わりますよ。
フォルダ「模写サイト」｛
フォルダ「css」｛ファイル「stylesheet.css」「responsive.css」｝
フォルダ「my-img」｛ページ内で使用する全ての画像ファイル｝
ファイル「index.html」
ファイル「script.js」
｝
といった構成になっています。おっしゃる通りHTMLファイルとCSSファイルは違うフォルダにあります。
ちなみにパスを記載するとき、vscodeエディタのエクスプローラー画面で画像ファイルを右クリックし「相対パスをコピー」または「絶対パスをコピー」しHTMLやCSSに張り付けていましたので、同じパスを張り付けていることになりますよね。
CSSに張り付けるパスを自分で変更すればよいのでしょうか？ それともファイル構成を変えたほうが良いのでしょうか？
回答1件
0
自己解決
CSSファイル内
background-image: url("my-img\bg02.png");
で表示されなかったのですが、パスを"my-img/bg02.png"と、\を/に変えてみたら表示されました。
パスはコピペしていただけだったので（HTMLでは\のままで表示されていました）
CSSファイルに記載する際は「/」に気を付けて記載してみます。
色々とアドバイスくださった方ありがとうございました。
投稿2019/09/16 08:50
総合スコア7
あなたの回答
tips
プレビュー
