静的HTMLサイトをWordPress化した時に、背景画像が表示されない

Question

HTMLサイトをワードプレスに移行した時に、なぜか背景画像だけが表示されません。
index.phpフォルダの中に、
<img src="<?php echo get_template_directory_uri(); ?>
のタグを入れると画像が読み込まれるということは分かったのですが、
style.cssのフォルダの中に
.section-contents {
width: 100%;
background: url(../images/×××.jpg);
}
と指定してますが,背景の画像が反映されないのはなぜでしょうか？

下記の同じような質問されてた投稿記事でも試しましたが、出来ませんでした‥
https://teratail.com/questions/70107

ご回答お願い致します。

Answer 1

背景の画像が反映されないのはなぜでしょうか？

そのCSS記述があるファイルからの相対パスになっていないからです。
get_template_directory_uri()で取得される情報を確認し、CSS記述からの相対パスになるように調整してください。

Comments

[saki09]

ご回答ありがとうございます。
相応パスにはなってると思います。
index.phpにも何か記述は必要でしょうか‥？

[m.ts10806]

相応ではなく「相対」です。
表示されないということはパスが合っていないということなので、そこはきちんと確認する必要があります。

Answer 2

このような質問の場合は、ファイルの場所が問題になるので、style.cssファイルと画像のある「パス」を質問に記載していただけないでしょうか？

---

以下、推測で記載すると...
( テーマのディレクトリは my-theme-dir で、style.css はテーマディレクトリの直下にあると仮定。 )

質問の CSS の記載の場合、

style.cssのフォルダの中に
.section-contents {
width: 100%;
background: url(../images/×××.jpg);
}

以下のような配置でないと正しく表示されないと思われます。(my-theme-dir ディレクトリと images ディレクトリが同じ階層)

wp-content/
+-- themes/
|   +-- my-theme-dir/
|   |   +-- style.css
|   |   
|   +-- images
|   |   +-- xxx.jpg

仮に

wp-content/
+-- themes/
|   +-- my-theme-dir/
|   |   |
|   |   +-- style.css
|   |   |
|   |   +-- images
|   |   |   +-- xxx.jpg

という配置(style.cssと images ディレクトリが同じ階層)だとすると

.section-contents {
    width: 100%;
    background: url(images/×××.jpg);                
}

になるのではないかと思います。

Comments

[saki09]

ご回答ありがとうございます。
階層はその通りでCHERRYさんのような記述でも表示されませんでした。
他の画像は表示されるのですが、CSSの中に記述してる画像だけ表示できないのですよね‥。

[CHERRY]

お使いのテーマは、オリジナルですか？　　
それとも何かのテーマをカスタマイズされていますか？

[saki09]

オリジナルです。
マンプを使っていて、その中にワードプレスを入れてます。

Answer 3

ご回答くださった方々に感謝します。
無事、解決できました。

@charset "utf-8";

*{
padding: 0;
margin:0;
}
body{
margin: 0;
background-image: url(../images/×××.png); 
}

というようにbodyの中に記述したら表示されました。
ちょっとまだWhy?の部分が理解できてないですが‥　とりあえずこのまま進めていきます。
ありがとうございました。

Comments

[m.ts10806]

質問と同じく回答も編集できます。
重複投稿してしまったのでしたら片方削除依頼をだしておいてください

[m.ts10806]

あと、相対パスよりルートディレクトリからの絶対パスの方が確実ですので、テーマなどの関係でややこしいところはあるかと思いますが、今後の検討としてください。

[saki09]

エラーが出たため重複投稿になってしまいました。後ほど削除します。
そうですね‥　絶対パスも試しましたが、うまいこといかなかったので、これを機にもう一度復習してみます。