こんにちは。としです。
今日はHTMLのbackground-imageについてのお話しです。
background-imageはよく使うCSSのプロパティですが
背景画像を設定するものですね。
それで指定の仕方は
background-image: url(“ここに画像のパスとファイル名を記入“);
ですね。
でurlのパスの指定を間違うと当然ですが、表示されません。
パスというのは表示したい画像が置いてある場所の事です。
ここでパスの書き方ですが、この記述がstyle.cssなどのCSSファイルだとしたら
そのCSSファイルがあるところから見た画像の置き場という相対パスでの指定になります。
例えばWordPressのテンプレートだとした場合
一般的にstyle.cssはテンプレートフォルダの直下にありますね。
例）wp-content/themes/theme名/style.css
そして、theme名フォルダ（ディレクトリ）の中に画像が入っているimgフォルダがあるとします。
例）wp-content/themes/theme名/img
その場合の指定の仕方は
background-image: url(“img/ファイル名”);
でOKです。
なぜなら、同じ階層にimg（画像フォルダ）があるからです。
もしくは、
background-image: url(“./img/ファイル名”);
でもOKです。
「./」の意味は、今いる場所（style.cssと同じ階層）という意味です。
そしたら、別のパターンで、例えば以下のようなフォルダ構成の場合
index.html
img(フォルダ)—画像が入っている
css(フォルダ)—style.cssとかreset.cssなどが入っている
このCSSフォルダの中のstyle.cssで同様に、background-imageを設定するとしたらこうなります。
background-image: url(“../img/ファイル名”);
上の例と違いが分かりますか？
../というのが追加されていますね。
この../（カンマ、カンマ、スラッシュ）というのはこの一セットで一つ上の階層に移動するという意味があります。
これはlinuxなど操作するときに使ういわゆる黒い画面でも１階層上に移動するときは、同じく../を使います。
つまり上のURLは「１階層上に移動して、その階層にあるimgフォルダの中のファイル名を読み込む」という事になります。
因みに、../../と２回書くと当然、２階層上に移動することになります。
分かってしまえば簡単ですね！
background-imageのurl指定で画像が表示されない原因でした！
これをみても難しい人は↓
TEDASKでは個人向けに、マンツーマンのホームページ制作レクチャーを行っております。
メールサポートのプランや、対面もしくはSkype、Zoomを使った1時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。
コメント