Q&A
適用されないのは、背景画像だけですか？
それ以外のcssが適用されてますか？
###画像が表示されません
ホームペジ摸写の練習をしているのですがbackground-colorを指定してもうまく表示されません。
HTMLフォルダー の中にCSSフォルダー、imagesフォルダー,
index.htmlファイルがあります。
画像は、imagesフォルダーの中においてあり、
「body {
background-image: url(images/example.png);」
と指定してます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML 練習</title> <!-- CSSの読み込み --> <link href="css/style.css" rel="stylesheet"> </head> <body> <header> <div class="header-container"> <div class="header-left"> <img src="images/siteLogo.png"> </div> <div class="header-right"> </div> </div> </header> </body> </html> /* CSS */ @charset "UTF-8"; /* headr */ body { background-image: url("images/main_visual_13-0x0.jpg") ; } ### 該当のソースコード ```ここに言語名を入力 ```HTML``` ### ここに問題に対して試したことを記載してください。 ###
はい、そのほかのCSSは問題なく適用できています。それで仕方なく今は背景画像をgeenに設定しています。
これは、コーディングが原因ではなくvscodeに問題があるのでしょうか？
「画像をどこに置いてあるか」、「CSSファイルをどこに置いてあるか」、「CSSファイルの中でbackground-imageプロパティのurl()で画像をどうやって指定しているか」がわからないと答えようがない。予想としては、実際にファイルが置いてある場所と、それを指定するurlの食い違い。
> vscodeに問題があるのでしょうか？
VSCodeのプレビューなどを使ってない限りはエディタはまったく関係ありません。
コードか、画像ファイルの問題です。
Daregadaさんのコメントの確認をまずして下さい。
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
回答1件
0
ベストアンサー
その構成なら"../images/main_visual_13-0x0.jpg" では。
CSSからの相対パスか絶対パスで書くかしましょう。
投稿2020/07/20 04:14
総合スコア69398
無事解決いたしました！
本当にありがとうございます！
最後に一つ質問なのですが、今までは画像を使うときに
```
<img class="logo" src="images/siteLogo.png">
```
で反映できていたのですが、背景画像だと../をつけなければいけないのでしょうか？
外部のCSSを使う場合はそこを基点とした相対パス（か絶対パス）で書く必要があるからです。「../」は一つ上のフォルダ。
そうゆう事なんですね。
ありがとう御座いました。
あなたの回答
tips
プレビュー
