Zenn
☔

【Rails7系】背景に画像(background-image)を設定する

2024/08/09に公開
CSS
Rails
Rails 7
tech

はじめに

現在Ruby on Railsを使用し、アプリ開発を行なっております。
背景が単色では物足りなく感じ、背景に画像を設定しました。
背景に画像を設定するのは久しぶりで、設定に少し手間取ったため投稿いたします。
参考になりましたら幸いです。

環境

Rails 7.1.3.4

実装方法

STEP1: 画像ファイルの配置

app/assets/images配下に画像ファイルを配置します。
私は、background.jpgと名前を指定しファイルを配置しました。

STEP2: app/assets/stylesheets配下のcssファイルに背景画像を設定する

app/assets/stylesheets/〇〇.cssファイルを作成し、そのファイル内に下記を記載します。
私はすでに別でcssファイルを作成していたため、今回はそのファイルに追記しております。

.background-image{
    background-image: url(background.jpg);
    background-size:cover;
  }
  • こちらの記事にあるように、background-image: url(background.jpg);にシングルウォーテーションがあるとうまくいかないようです。（私は未検証です）
  • background-size:cover;を指定しないと、フルサイズでカバーしてくれないのでこちらも記載します。

STEP3: app/views/layouts/application.html.erbで、〇〇.cssファイルを読み込む

headタグ内で、先ほど作成した〇〇.cssファイルを読み込みます。
stylesheet_link_tagの後にcssファイル名の.cssを除いた形で、cssファイルを指定します。

<head>
 # app/assets/stylesheets/〇〇.cssを読み込む
    <%= stylesheet_link_tag '〇〇', media: 'all' %>
</head>

STEP4: 背景画像を使用したい箇所で、divタブで囲む

一旦全てのファイルに背景画像を適用させたかったため、app/views/layouts/application.html.erbのbodyタグ内でdivタグで背景画像を指定しました。(<div class="background-image">)

<body>
  <div class="background-image">
    <% if current_user %>
      <%= render 'shared/after_login_header' %>
    <% else %>
      <%= render 'shared/before_login_header' %>
    <% end %>
    <%= render 'layouts/flash_messages' %>
    <%= yield %>
  </body>

最後に

他の方の記事を参考にさせていただきながら設定しましたが、異なる記載の箇所も散見されたので記事にしました。
もし誤り等あればご指摘いただけますと幸いです。
最後までご覧いただき、ありがとうございました。

参考記事

Discussion