背景画像を表示させたいが、railsでの方法が分からない方はいると思います。htmlでimage画像を挿入できることは知っていても、背景画像の設定まで知っている方は少ないと思います。今回の記事では「railsのscss内の記述で背景画像を表示する方法」をご紹介します。
本記事は、個人メモとしてプログラミング知識を纏めています。
現在のバージョンや仕様に対応していない可能性もあります。
その点、ご了承ください！
何がしたかったか？
背景画像（バックグラウンド）を設定したかった。
jpg形式の画像をディレクトリに配置したかった。
知識
background-image(画像を表示）
参考：スタイルリファレンス
background-size(画像サイズを指定）
参考：スタイルリファレンス
スポンサーリンク
railsのscssで背景画像を表示する方法
手順
①背景画像を用意する。
②背景画像をapp/assets/images内に配置する。
私は、images内で画像の振り分けを行いたかったので、app/assets/images/records（任意）下に配置しました。
③scssファイルに以下のように記述する。
background-image: image-url(‘records/library.jpg’);
background-size: cover;
④表示されたかを確認する。
補足
・拡張子は省略しても表示される。
・background-sizeプロパティを指定しないと、画像一部分だけの表示となってしまう。
・背景画像を透かしたい場合は、opacityプロパティを使う。
所感
アセットパイプラインでデプロイ時に画像エラーが起きたので、もう少し仕組みを勉強する必要があると思いました。また、public内に配置する方法もあります。参照する場合は、パスの記載が少し違うらしいです。publicは投稿画像が格納されるディレクトリなので、app/assets/images内が背景画像などの設定には使えそうです。
