0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[rails7]背景画像が表示されない件

Last updated at Posted at 2024-06-02

目的

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');
}

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

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

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

解決できた記事

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

0
0
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?