【WordPress】CSSのbackground-image:url()で背景画像を読み込む方法

2023年5月26日2023年7月10日

本記事では、WordPressでCSSのbackground-image:url()で背景画像を読み込む方法について解説しています。

WordPressの学習におすすめ書籍

1冊ですべて身につくWordPress入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,200 （2023/11/27 10:27時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

テーマディレクトリ配下の画像を読み込む場合

テーマディレクトリ配下に直接画像を配置し、その画像をbackground-image:url()で読み込みたい場合は以下のように記述します。

// 相対パス
background-image: url("./images/bg-image.png");

// 絶対パス
background-image: url("/wp-content/themes/theme-name/images/bg-image.png");

相対パスは人によってディレクトリ構造が異なるため、各自で置き換えてください。上記コードの場合、style.cssと同じ階層にimagesディレクトリがありその中にbg-image.pngの画像ファイルがあると表示されます。

WordPressの管理画面からアップロードした画像をbackground-image:url()で読み込みたい場合は以下のように記述します。

// 絶対パス
background-image: url("/wp-content/uploads/2023/05/bg-image.png");

相対パスでも指定することは可能ですが、uploadsディレクトリの階層がかなり上にあるためパスが悲惨なことになります。絶対パスで指定することをオススメします。

よかったらシェアしてね！