目的

rails7でwebアプリを作成している途中で、トップページに背景画像を挿入する際に何をやっても挿入されない事態に陥りました。
その問題の解決記事も少なく少しハマったので備忘録として残したいと思います。

対象者

rails7で背景画像を設定したいけどうまくいかない人

開発環境

Rails 7.0.4.3
ruby 3.1.2
bootstrap 5.3.3

問題

まず背景画像を表示する際にHTMLとCSSを下のように設定しました。

top.html

<div class="container-fluid background-image">
    本文
</div>

top.scss

background-image{
  background-image: image-url('app/assets/images/background.jpg');
}

これで表示されると思いきや、全く表示されず。画像の欠片も表示されず。
「まぁHTMLとCSS書くの久しぶりやし、設定が間違っているっしょ。調べれば余裕っしょ」と、たかを括っていました。

とりあえずググると下の記事が出てきたので全て試しました。

しかし、、、表示されず。。。最初にやった時と同じく画像の欠片も表示されませんでした。
そして泥沼戦へ、、、割とハマりました

上の記事を試しても表示されないよという人がいたら次の解決方法を試してみてください。

解決方法

top.scss

background-image{
  background-image: image-url('app/assets/images/background.jpg');
}

#上のコードを下のように修正

background-image{
  background-image: url('background.jpg');
}

#6月21日追記
#シングルクォーテーションが入っていると本番環境で画像が表示されませんでした
#下のように直してください

background-image{
  background-image: url(background.jpg);
}

クォーテーションはいらなかったよ
これで無事映るようになったよ

解決できた記事

補足説明や他の方法でも映るよという方がいたらコメントください