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

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

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

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

883閲覧

background-imageが機能しない

sho__

総合スコア8

CSS3

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

HTML5

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2018/09/13 06:16

編集2018/09/13 07:44

html

1 2 <div class="card__picture card__picture--1"> 3 &nbsp; 4 </div>

↑こちらがHTMLです

sass

1 &__picture { 2 background-size: cover; 3 //height:23rem; 4 5 &--1{ 6 background-image: url(../img/nat-5.jpg); 7 } 8 } 9

↑こちらがcssです

background-image:url();が機能しません

imgフォルダの中には画像がちゃんと入っています
また、..と指定してあるようにこのcssの上のフォルダにimgフォルダがあり
そこの中に画像が入っています

イメージ説明
↑こちらがbackground-を指定しているsassのファイルです

イメージ説明
↑こちらがbackground-image:url の画像のフォルダが入っているimgフォルダと
style.cssです

イメージ説明
↑こちらがindex.htmlです
**こちらのimgは違うので気にしないでください

エラーにはなっていません
困っています
よろしくお願いしますm(__)m

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

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

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

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

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

x_x

2018/09/13 06:38

開発者ツールで見ても画像のリクエストが正常に返ってきているということでしょうか?
sho__

2018/09/13 06:44

戻ってきてます!! 今絶対パスのほうを指定しましたら画像は表示されましたがなぜ、相対パスの場合機能しないのかがわかりません
x_x

2018/09/13 06:50

パスが違うのでは? ステータスは404ではなく200になってますか?
m.ts10806

2018/09/13 06:52

階層が合ってないからに他ならないのでは。正しい構成を図示いただけますか?
sho__

2018/09/13 06:58

先ほどエラーは出ていないといいましたが、このようなエラーが出ていました、すみません。  img/nat-5.jpg:1 GET file:///C:/Users/poket/Desktop/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/starter/img/nat-5.jpg 0 ()  ​
x_x

2018/09/13 07:01

おや、ローカルにあるCSSを読み込んでいるのでしょうか
sho__

2018/09/13 07:09

すみません、ローカルという単語がいまいちわからないのですが、style.scssをstyle.cssにコンパイルしてそれをindex.htmlのほうに読み込ませています
x_x

2018/09/13 07:16

style.cssとnat-5.jpgとの位置関係はどうなってますか?
dit.

2018/09/13 07:17

ローカル=ネット上ではない自分のパソコン上 という認識で良いかと思います。コンパイルされたstyle.cssから見て、一つ上のフォルダにimgというフォルダがあり、その中にnat-5.jpgがあるんですよね?
sho__

2018/09/13 07:30

style.cssとnat-5.jpgの位置関係は、style.cssと nat-5.jpgの画像が入ってる cssフォルダが同じフォルダに入ってます。  なのでstyle.cssの一つ下の階層に画像のフォルダがあります
m.ts10806

2018/09/13 07:35

文字では限界があります。正しい構成を"図示"いただけますか?
sho__

2018/09/13 07:36

style.cssと同じフォルダにimgフォルダがありその中に、nat-5.jpgがあります。 urlの指定の ( .. /) ←の部分を消してみて再度やってみます!
m.ts10806

2018/09/13 07:37

質問は編集できるので…
sho__

2018/09/13 07:38

Failed to load resource: net::ERR_FILE_NOT_FOUND nth-5.jpg:1 というエラーが出てきます!
dit.

2018/09/13 07:44

こちらが想定していたファイルの位置関係を回答に追記しました。これと実際の構成が違う場合、指定の方法が誤りです。
dit.

2018/09/13 07:47

sassの元ファイルscssの場所はどこでもいいです。「コンパイルされたcssから見た場所」を記述します→background-image: url(img/nat-5.jpg);もしくはbackground-image: url(./img/nat-5.jpg);
sho__

2018/09/13 07:47

質問を編集して フォルダの位置関係を載せておきました、ありがとうございます!!!
sho__

2018/09/13 07:55

解決しました!!! 画像のスペルミスが原因でした(笑) すみません、大変お世話になりました。初心者ですがこれからも頑張りたいと思います
dit.

2018/09/13 08:00

あれ、回答編集してたら想定外の部分で解決してた…
x_x

2018/09/13 08:02

そうなんですか? 画像ではstyle.cssと同階層にimgフォルダがあり、url(../img/nat-5.jpg) ではなく url(./img/nat-5.jpg) が正しいように見えます。
dit.

2018/09/13 08:13 編集

おそらく16:36のコメントの時点で../を消した→表示できない→見直したらスペルミス(nat-5がnth-5になってた)ということですかね。その2分後のコメントのNOT FOUNDからの予想…
guest

回答1

0

ベストアンサー

コンパイルされたCSSはどうなってるんでしょう?

.cardが抜けてるのは転記の際のコピー範囲の選択ミス?

sass

1.card{ 2 &__picture { 3 background-size: cover; 4 //height:23rem; 5 &--1{ 6 background-image: url(../img/nat-5.jpg); 7 } 8 } 9}

こういう関係を想定してたんですが…
イメージ
こうだったのかな?
イメージ2

追記の所にも書きましたがそれならbackground-image: url(img/nat-5.jpg);もしくはbackground-image: url(./img/nat-5.jpg);でいいはず

投稿2018/09/13 06:38

編集2018/09/13 07:59
dit.

総合スコア3235

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

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

sho__

2018/09/13 06:46

.card { // FUNCTIONNSLITY perspective : 150rem; -moz-perspective: 150rem; position:relative; height:40rem; &__side { color: #fff; font-size:2rem; height:50rem; transition: all .9s ease; position: absolute; top:0; left:0; width:100%; backface-visibility: hidden; border-radius:3px; box-shadow: 0 1.5rem 1.3rem rgba($color-secondary-dark, .60); &--front{ background-color: #fff; } &--back { transform:rotateY(180deg); background-image: linear-gradient(to right bottom, $color-secondary-light, $color-secondary-dark); } } &:hover &__side--front { transform:rotateY(-180deg); } &:hover &__side--back { transform:rotateY(0); } //FRONT SIDE STYLING &__picture { background-size: cover; height:16rem; &--1{ background-image: url(https://i1.wp.com/www.masamedia.top/wp-content/uploads/2017/11/mizsuho170920015_TP_V.jpg); } } .cardのsaaファイルはこのようになっているので大丈夫です 先ほど絶対パスの場合は画像が表示されましたが相対パスの場合なぜ表示されないのかが分からないです
dit.

2018/09/13 07:21

コンパイルされたcssと画像フォルダの位置関係を見直してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問