HTML+CSSエンジニア向け初心者向け

background-imageのurl指定で画像が表示されない原因

HTML+CSS

こんにちは。としです。

今日は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など操作するときに使ういわゆる黒い画面でも1階層上に移動するときは、同じく../を使います。

つまり上のURLは「1階層上に移動して、その階層にあるimgフォルダの中のファイル名を読み込む」という事になります。

 

因みに、../../と2回書くと当然、2階層上に移動することになります。

分かってしまえば簡単ですね!

 

background-imageのurl指定で画像が表示されない原因でした!

 

これをみても難しい人は↓

TEDASKでは個人向けに、マンツーマンのホームページ制作レクチャーを行っております。

メールサポートのプランや、対面もしくはSkype、Zoomを使った1時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。

WordPressマンツーマンレクチャーサービス | WordPress専門ホームページ制作事務所
WordPressで書きたいブログが決まり、さてブログを立ち上げようと意気込んだのは良いけど、WordPressは意外と立ち上げから全ての設定を終わらせるまでのプロセスが初心者には難しく感じ、中には挫折してしまった方も少なくないと思います。もしくは、1からWordPressを立ち上げたいのだけれども、ブログの説明や本だ...

 

 

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

いいね!をしてWordPressの
お役立ち情報を受け取る!

TEDASK(テダスク)-埼玉県川口市のWEB制作事務所

コメント

タイトルとURLをコピーしました