埼玉県川口市の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時間のセッションなどのサービスを行っておりますので是非ホームページ制作レクチャーの詳細をご覧になってみてください。

 

関連記事

ツール 初心者向け 運用者向け

【無料】初心者でも簡単にで使えるWEBサイト分析ツール2選!

こんにちは。 埼玉県川口市でWEB制作を行っているToshi Seitoです。 今日は、私が埼玉で定期的に行っているWordPress勉強会でもお話ししたWEB解析ツールについてご紹介しようと思います ...

ブログライターさん募集

ニュース

パートナー募集にブログライターさんも加わりました!

こんにちは! 埼玉県川口市でウェブエンジニアとして活動しているToshi Seitoです。   パートナー募集にブログライターさんも加わりました。 募集要項については募集用のページを作ってい ...

laravel

Laravel開発

【Laravel】"stream_socket_enable_crypto(): Peer certificate CN=*.XXX' did not match expected CN=XXXXX'"のエラーが出たら

こんにちは。川口でウェブアプリケーション開発をしています、テダスクのToshi Seitoです。 今回はLaravel5.7で開発中で行ったメール送信に関するエラーです。 stream_socket_ ...

補助金

キャンペーン ニュース

販売促進にかかる費用最大100万円補助が出ます!

販売促進にかかる費用が最大100万円の補助金が出ます」 こちらは「持続化給付金」とはまったく別の補助金です! 小規模事業者のみなさんが、地域の産業に貢献してもらうための商品サービスの宣伝など販路開拓等 ...

テダスク|タイムチケットライフ

ニュース

タイムチケットライフさんにテダスクを取材していただきました!

こんにちは。 埼玉県川口市でウェブ制作を行っているToshi Seitoです。 私が2016年から利用しているタイムチケットというマッチングスキルシェアサービスの専門メディアのタイムチケットライフさん ...

 

 

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

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