質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

466閲覧

CSS background-imageを使っても背景が表示されません。

TaikiIshida

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/09/13 14:53

vscodeのエディタでHTMLとCSSのファイルを作りwebページを作成中、background-imageだけが表示されません。

webページ作成中divのクラスにCSSでbackground-imageを使っても設定した画像が表示されません。
検索して調べましたが解決策が見つからず投稿してる次第です。お願いします。
テキストエディタはvscodeです。
同じ画像ファイルはimgでは表示されるのですが、background-imageでだけ表示されません。
なのでパスは間違いないと思います。div要素の幅や高さなども調整しましたがダメでした。

CSS記載内容

.class { background-image: url("画像のパス"); }

試したこと

他の画像パスでも試す。相対パスと絶対パスをそれぞれ入れてみる。
他のHTMLクラスでも試す。background-colorなども試す→他は全て表示されます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/09/13 14:57

(質問文は編集できます)問題が再現するHTML/CSSを質問文に追記ください。
TaikiIshida

2019/09/13 21:22

index.htmlの記載内容 <div class="curriculum"> <img src="my-img\sp_bg01.png"> <div class="curriculum-text"> <h4>一人ひとりの能力に合わせた</h4> <h1>完全個別<span>の</span>カリキュラム</h1> <p class="first">みちしるべでは、文部科学大臣賞を受賞した学習システムを導入しています。 次世代型のオンライン学習管理システムで、内容がわかりやすく学習し易いだけでなく、お子様の 学習到達度・進捗状況を分析し、確認し、管理することが可能です。それにより、「短期・中 期・長期」の目標設定が明確になり、個々のお子様に最適な学習プログラムを提案いたします。 </p> <p class="second">お子様の個性に合わせた学習の進め方やその時点の学力に合わせた適切な難 易度を判別し、適度な負荷をかけながら成績の向上を目指していきます。</p> </div> </div> stylesheet.cssの記載内容 .curriculum { height: 550px; background-image: url("my-img\orange.jpg"); }
Lhankor_Mhy

2019/09/14 00:41

ボックスの高さが潰れているのでは、と推測しています。 『他は全て表示されます』とのことですが、 ・他の画像パスでも試す .curriculum { height: 550px; background-image: url("my-img\sp_bg01.png"); } →別の画像なら表示される ・相対パスと絶対パスをそれぞれ入れてみる .curriculum { height: 550px; background-image: url("http://example.com/my-img\orange.jpg"); } →絶対パスなら表示される ・他のHTMLクラスでも試す .curriculum-text { height: 550px; background-image: url("my-img\orange.jpg"); } →別のクラスの要素に背景をつけるなら、表示される ・background-colorなども試す .curriculum { height: 550px; background: red; } →背景色は表示される という理解で合っていますか? つまり、この現象は ・この画像を ・.curriculum の背景として ・相対パスで指定した時 だけに再現する、ということで間違いありませんか?
kei344

2019/09/14 02:56

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。
yoshinavi

2019/09/14 03:12

画像のサイズはいくつですか?
TaikiIshida

2019/09/14 12:19

私の説明が足りなくてすみません。 「他は全て表示されます」は、background-image以外はcssで適応されていますという意味です。 そしてこの記載しているクラスや画像に限らず相対パスでも絶対パスでも背景としては表示されません。 またどのクラスでも背景色は適応されています。 背景として表示されない画像もすべてimg要素としては表示されるのでパスの間違いではないと考えています。 またクラス要素にborderを表示して、クラスが潰れていないことは確認しています。
yoshinavi

2019/09/14 19:23

状況としては、表示されないのが不明ですね。 考えられるのは、ダブルクォートが全角になっていないか?全角文字があったりしないか?パスのダブルクォートを削除、等を確認してみてください。
yoshinavi

2019/09/14 19:27

デベロッパーツール等では、どのような状態でしょうか?他のCSSが適用されていませんか?
TaikiIshida

2019/09/15 08:38

ダブルクォート等は問題なさそうです。 しかし1つ気づいたことがあります。 htmlファイル内の <img src="相対パスまたは絶対パス"> としている中のパスの部分をctrl+クリックで画像が表示されますが、 cssファイル内で background-image :url("相対パスまたは絶対パス"); と記載し同じようにctrl+クリックをしてもエディタ上で「ファイルを開けません」と出るのですが これが原因でしょうか?
yoshinavi

2019/09/15 08:43

パスの位置でしょうね。 ファイル構成はどうなっていますか? HTMLファイルとCSSファイルが違うフォルダなら、パスは変わりますよ。
TaikiIshida

2019/09/15 23:11

フォルダ「模写サイト」{   フォルダ「css」{ファイル「stylesheet.css」「responsive.css」}   フォルダ「my-img」{ページ内で使用する全ての画像ファイル}   ファイル「index.html」   ファイル「script.js」 } といった構成になっています。おっしゃる通りHTMLファイルとCSSファイルは違うフォルダにあります。 ちなみにパスを記載するとき、vscodeエディタのエクスプローラー画面で画像ファイルを右クリックし「相対パスをコピー」または「絶対パスをコピー」しHTMLやCSSに張り付けていましたので、同じパスを張り付けていることになりますよね。 CSSに張り付けるパスを自分で変更すればよいのでしょうか? それともファイル構成を変えたほうが良いのでしょうか?
guest

回答1

0

自己解決

CSSファイル内

background-image: url("my-img\bg02.png");

で表示されなかったのですが、パスを"my-img/bg02.png"と、\を/に変えてみたら表示されました。

パスはコピペしていただけだったので(HTMLでは\のままで表示されていました)
CSSファイルに記載する際は「/」に気を付けて記載してみます。

色々とアドバイスくださった方ありがとうございました。

投稿2019/09/16 08:50

TaikiIshida

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問