TEDASKは埼玉県川口市のフリーランスWEBエンジニアが運営するホームページです。WordPressによるウェブサイト制作からWEB制作に関するお悩み解決をお手伝いしています!

TEDASK(テダスク)

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

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

更新日:

こんにちは。としです。

今日は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フォルダがあるとします。

その場合の指定の仕方は

background-image: url("img/ファイル名");

でOKです。

 

そしたら、別のパターンで、例えば以下のようなフォルダ構成の場合

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勉強会】第6回WordPress勉強会&もくもく会活動報告(2019/08/03)

【WordPress勉強会】第6回WordPress勉強会活動報告(2019/08/03)の記事は次のリンクからご覧いただけます。   【WordPress勉強会】第6回WordPress勉 ...

タイムチケットアワード2019

ニュース

タイムチケットアワード2019で優秀チケット賞とベストハッピーレポート賞をいただきました!

こんにちは! 埼玉県川口市でウェブエンジニアをしております、テダスクのToshi Seitoです。 2019年7月27日(土)に今年で3回になる、タイムチケットアワード2019に受賞者として参加させて ...

WordPress勉強会in埼玉

WordPress勉強会

【WordPress勉強会】第5回WordPress勉強会活動報告(2019/07/20)

【WordPress勉強会】第5回WordPress勉強会活動報告(2019/07/20)の記事は次のリンクからご覧いただけます。 【WordPress勉強会】第5回WordPress勉強会活動報告( ...

WordPress勉強会 in 埼玉

WordPress勉強会

【WordPress勉強会】第4回WordPress勉強会活動報告(2019/06/15)

【WordPress勉強会】第4回WordPress勉強会活動報告(2019/06/15)の記事は次のリンクからご覧いただけます。 【WordPress勉強会】第4回WordPress勉強会活動報告( ...

パートナー募集

ニュース

パートナー募集にWebデザイナーさんも加わりました!

こんにちは! 埼玉県川口市でウェブエンジニアとして活動しているToshi Seitoです。 今年の4月にエンジニアさんのパートナー募集を行いましたが、 パートナー募集にデザイナーさんの募集も加わりまし ...

 

 

この記事が気に入ったら
いいね ! しよう

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