本記事では、WordPressでCSSのbackground-image:url()で背景画像を読み込む方法について解説しています。
WordPressの学習におすすめ書籍
1冊ですべて身につくWordPress入門講座
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/wordpress-book.jpg)
メリット
- サイト運営に必須のことが学べる
- 基本的な使い方~オリジナルテーマ開発まで学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
テーマディレクトリ配下の画像を読み込む場合
テーマディレクトリ配下に直接画像を配置し、その画像を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ディレクトリの階層がかなり上にあるためパスが悲惨なことになります。絶対パスで指定することをオススメします。