【Ruby on Rails】CSS・SCSSでbackground-image(背景画像)を設定する

はじめに

railsでCSS・SCSS(Sass)から画像を読み込む場合、画像の置き場所で読み込み方が違います。

railsの基本的な画像の置き場所は、

の2通りです。

今回はCSSとSCSS(Sass)の各画像の読み込み方を紹介します。

Rails : 5.2.6

Ruby : 2.6.8

cssの拡張子にの後ろに.erbを追加し、asset_pathもしくはimage_pathヘルパーメソッドを使用して、読み込みます。

background: url(<%= asset_path 'image.png' %>);
background-image: url(<%= asset_path 'image.png' %>);

データURIスキーム（CSSファイルにデータを直接埋め込む手法）を使いたい場合は、asset_data_uriを使用します。

background: url(<%= asset_data_uri 'image.png' %>);

もし、下記のコードのように画像のパスを直接指定したら、

background-image: url(/assets/images/image.png);

画像は読み込まれず404 not foundが発生します。

理由としてはRailsのアセットパイプライン機能にあるのですが、詳細は後で記載します。

こちらは画像のパスを書き込めば読み込めます。

erb拡張子も追加する必要はありません。簡単ですね。

background: url(/images/image.png);
background-image: url(/images/image.png);

SCSSでは、asset-pathの代わりに、image-urlもしくはasset-urlヘルパーメソッドを使用して、読み込みます。

background-image: image-url('image.png');

image-urlを使用する際、SCSSではerb拡張子をつける必要はありません。

sass-railsというgemをインストールすることで、ヘルパーメソッドを使用できるようになっているからです。

ちなみにですが、Rubyではasset_pathのようにアンダースコア(_)を使用し、SCSSはasset-pathのようにハイフン(-)を使用します。

CSSと同じ方法です。

background: url(/images/image.png);
background-image: url(/images/image.png);

アセットパイプラインについて簡単説明すると、

assets配下のJavaScriptやCSS、imageファイルを最終的にアプリを使う上で都合の良い状態にするための処理をするフレームワークです。

アプリを使う上で都合の良い状態にするために4つ処理をします。

各処理の説明はRailsガイドやこちらを参考にしてみてください。

ここで重要なのはassets/imagesもアセットパイプラインの対象だということです。

assets/images配下の画像ファイルは、4つめの処理のダイジェスト(ハッシュ値)の付与で名前が変わってしまいます。下記が実際にブラウザで読み込まれた時の画像名です。

image-505050f044b5491e1d3c351862282b6ffe77a39124d81ef60779b755b6591591.png

名前が変わるので、直接パスをurl(/assets/images/image.png)ように指定しても、画像は読み込まれません。

じゃあどうすればいいのか？と思うかもしれませんが、説明で使用したヘルパーメソッドを使用すればOKです。

assets/images配下の画像のパスを指定するときに、asset_pathやimage-urlなどのヘルパーメソッドを使用しましたが、

これは何をしているのかと言いますと、アセットファイルへのパスを取得しています。

Sassではハイフン(-)、Rubyではアンダースコア( _ )

このヘルパーメソッドはダイジェスト(ハッシュ値)の付与された画像ファイル名も取得してくれるので、assets/images配下の画像が表示されます訳です。

railsで背景画像を指定するのにも、色々と奥が深いです。

書いてあるコードをコピぺして実装するだけではなく、意味を理解してみるとより良い学習になるかもしれません。