Ruby on Rails background-imageが表示されない

Question

〜〜(省略)〜〜
.top-main {
    〜〜(省略)〜〜
    background-image: url("/among_us.png");
  }
〜〜(省略)〜〜

ちなみに、Visual Studio Codeを使っているのですが、"/among_us.png"にオレンジのアンダーラインが引かれていて、怪しいなとは思っています...

Answer 1

scssに問題があった訳ではなく、htmlで「.top-main」が読み込めていないのが原因でした。

Answer 2

url("/among_us.png");
おそらくここのパスが間違っていると思います。
ディレクトリ構成がわかれば解決できそうです。

Comments

[tanukiman]

ご回答ありがとうございます！

画像ファイルは、
/Users/ken/Dropbox/エンカツ/sample_app/public/among_us.png
に位置しています。
(ディレクトリ構成の答えになっていますでしょうか...?)

[nasuk47]

SCSSのファイルはどこにありますでしょうか？

[tanukiman]

/Users/ken/Dropbox/エンカツ/sample_app/app/assets/stylesheets/home.scss
です！

[nasuk47]

下記記事を参考に`url("/among_us.png");`のパスを変更してみてください。
わからなかったらまた回答してください。

https://webliker.info/78726/#toc_7

[tanukiman]

記事まで紹介していただきありがとうございます！
大変勉強になりました！

しかし、表示したいページのhtmlは
/Users/ken/Dropbox/エンカツ/sample_app/app/views/home/top.html.erb
に位置していて、使用したい画像は
/Users/ken/Dropbox/エンカツ/sample_app/public/among_us.png
にあるため、

```scss
〜〜(省略)〜〜
.top-main {
〜〜(省略)〜〜
background-image: url("../../../public/among_us.png");
}
〜〜(省略)〜〜
```

でやってみたのですが、ダメでした...

[nasuk47]

すみません。
https://qiita.com/d0ne1s/items/0af5e99feafd5172d8ce
こちらの記事の方が適切だったかもしれません。
```
background-image: url("/images/among_us.png");
```

[tanukiman]

そもそも「.top-main」が読み込めていないことが原因でした。
とはいえパスの勉強になりました。ありがとうございました！

[nasuk47]

よかったです。