Wordpressでの背景画像の表示

Question

エディタでコーディングをしたファイルをwordpressでローカル環境を構築し、作成しています。
画像のパスを書き換えているのですが、cssでの背景画像が表示されません。

階層としては
ファイル
∟css
∟style.css
∟img
∟bgi.jpg
index.php

といった形です。

background-image: url("images/sample.jpg");
のように私と同じファイルの階層でこのようにすると表示することができるということを検索から得たのですが、実際に試してみると動きませんでした。
キャッシュの削除なども試してみましたがうまくいかず

何か他に原因があればご教授頂きたいです。

Comments

[Lhankor_Mhy]

background-image: url("img/bgi.jpg");
のように書いた、ということでいいですか？

Answer 1

ディレクトリ構成が無いので正確な事は言えませんが、、、

背景画像のパス設定で結構間違えやすいのが
表示されるhtmlやphpからの相対パスを書いてしまう事。

背景画像はスタイルシートからの相対パスになりますので
確認なさってはいかがでしょう?

Answer 2

おそらく正しい階層は以下に示すような感じですよね。

• CSS ディレクトリの中に style.css がある
• img ディレクトリの中に bgi.jpg がある
• root ディレクトリに index.php がある

∟css/
　∟style.css
∟img/
　∟bgi.jpg
index.php

css/style.css から見て img/bgi.jpg は 1 つ上の階層に戻って img ディレクトリの中にあるので、指定すべき相対パスは background-image: url("../img/bgi.jpg"); になります。

あるいはルート相対パスで指定するなら background-image: url("/img/bgi.jpg"); になります。WordPress であればこのルート相対パスでも大丈夫です。

元の background-image: url("images/sample.jpg"); というパス指定ですと、css/images/sample.jpg を参照してしまうため、背景画像が表示されないのではないでしょうか。