wordpressでbackground-imageを使いたい

Question

画像をbackground-imageとして使いたいい。

<img src="<?php echo get_template_directory_uri(); ?>/image/~~~~>では、画像の出力ができたのですが、background-imageになると出力ができません。

どのような記述で背景画像として使用できますか？
よろしくお願い致します。

##試したこと

//WordPressのテンプレートタグを使ったが失敗
.class名{
background-image: url("<?php echo get_template_directory_uri(); ?>/image/~~~~~");
}

//WordPressのテンプレートタグを使わずに写真のパスのみで行ったが失敗
.class名{
background-image: url("image/~~~~~");
}

Comments

[CHERRY]

このCSS は、どのテンプレートファイルに記載されたのでしょうか？

Answer 1

img タグで出力できたのでしたら、そのURLをCSSのbackground-imageプロパティのurl値（"ここ"）に代入してみてください。

正常に表示できれば、CSSファイルを置いている場所から「相対パス」か、またはスラッシュから始まる「絶対パス」にしておくのが無難です。

ちなみに、CSSはPHPでは無いので、普通のWebサーバーでは、WPのテンプレートタグは出力できないです。

404エラーであれば、この「パス」の記述ミスがほとんどです。

おそらく、cssとimageディレクトリを分けて同じ階層に置いている場合、「試したこと」の2番目は、相対パスの場合はurl値が「./image/~~~」となります。

Comments

[higa_yomityu]

cssにはテンプレートが使えないのですね！
”ここ”に代入すると出力できました。ありがとうございます。