はじめに
cssのbackgroundプロパティで背景画像を指定した時に、「ちゃんと画像が表示がされない・・・」と思ったことはありませんか？
今回はそんなお悩みを持った方向けに記事を書いていこうと思います。
背景画像が表示されない時の対処法、相対指定の仕方
backgroundプロパティで背景画像を指定するときは相対指定
基本的にbackgroundプロパティで背景画像を指定するときは相対指定をすれば良いです。
PR
下記でいくつか例を挙げて紹介します。
静的ページにbackgroundでプロパティで背景画像を指定するとき
index.htmlでページを表示させます。index.html内の「.bg-image」というクラス属性を持つ要素に、imagesフォルダ内のimage.pngを背景画像として表示させるとします。
静的ページでimagesフォルダとstyle.cssが同階層にある構造の時
style.css
.bg-image {
background: url(images/image.png);
}cssを記述したstyle.cssから画像ファイルを辿ると、同階層にimagesフォルダがあるので上記のような記述になります。
静的ページでimagesフォルダとcssフォルダが同階層にある構造の時
style.cssから見ると1つ上の階層にimagesフォルダがある。
style.css
.bg-image {
background: url(../images/image.png);
}cssを記述したstyle.cssから画像ファイルを辿ると、style.cssから1つ上にimagesフォルダがあるので1つ上の階層に上がってからimagesフォルダを参照する必要がある。「../」の部分が1つ上の階層に上がることを示している。
WordPressページにbackgroundでプロパティで背景画像を指定するとき
WordPressだとファイルの構造は変わりますが、基本的に相対指定で背景画像を表示することができます。ただ、静的ページと比べると多少厄介です。静的ページに指定するときは「../」の数がいくつあるかどうかを考えるだけですが、WordPressの場合そうはいかない場合があります。
WordPressには画像やCSSのパスを取得する「get_template_directory_uri()」があります。この関数を使用すれば、間違い無いのですが、cssファイルに使用できないのが残念です。自身で間違えずに相対指定をするしかありません。
WordPressでimagesフォルダとstyle.cssが同階層にある構造の時
ファイルの構造が変わったとしても、style.cssとimagesフォルダが同階層にあるので、静的ページと同じcssの指定になります。
.bg-image {
background: url(images/image.png);
}では次のような例を考えます。
<head>タグ内の<style>タグ内に直接cssが出力される場合
または、その記事の編集画面で「カスタムCSS」の入力欄があり、そこにbackgroundプロパティで背景を指定した。（いずれにせよ<head>タグ内の<style>タグ内に、cssが出力されるものとする。）
<head>
<style>
.bg-image {
background: url(images/image01.png);
}
</style>
</head>なぜなら、<head>タグ内の<style>タグ内のcssとimagesフォルダは同階層ではないからです。
では、<head>タグ内の<style>タグ内のcssはどの階層に存在するのでしょうか？
下記構造を確認してください。
cssが記述されている現在のページからimage.pngまでを辿るように、相対指定で書けば表示されるようになります。つまり、<head>タグ内の<style>タグ内のcssに背景画像を指定した場合は下記のようなcssになります。
style.css
<head>
<style>
.bg-image {
background: url(wp-content/themes/使用テーマ名/images/image01.png);
}
</style>
</head>現在のページと同階層のwp-contentフォルダから相対指定でcssを指定することで表示されるようになります。
静的ページだとWordPressのようにファイル類の階層が深くなく、index.htmlの<head>タグ内の<style>タグ内にcssを記述したとしても、index.htmlがimagesフォルダと同階層なため、imagesフォルダから辿るだけの単純な相対指定になりますが、WordPressの場合、wp-contentから辿る必要が出てくる場合もあるという意味で、先ほどWordPressではそうはいかない場合があると表現しました。
まとめ
cssで背景画像を指定するときは、cssを記述した場所から画像ファイルまで辿っていくようなイメージでファイルパスを記述する。
<head>タグ内の<style>タグ内のcssは「現在のページ」に存在する。
backgroundで背景画像が表示されないときはcssがどこに存在するかを意識して相対パスを指定しましょう。
