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

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

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報

著者	Mana
発売日	2022/3/22
ページ数	344ページ
Kindle版	○
レビュー (Amazon)	(217件)

１冊ですべて身につくＷｏｒｄＰｒｅｓｓ入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報

著者	清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日	2022/1/13
ページ数	416ページ
Kindle版	○
レビュー (Amazon)	(53件)

WordPressオリジナルテーマ制作入門 [ 清水由規 ]

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

先輩くん

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

後輩ちゃん

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

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

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

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

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

メディアに登録した画像を読み込む場合

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

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

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