gurelog

エンジニアになるため、日々学んだことをまとめています

【Rails】background-imageで背景画像をつける時につまづいたこと

こんにちは。gureです。

今回はポートフォリオを華やかにしようと考えて背景画像を設定した時に詰まったことを備忘録がてら書こうと思います。

 

はじめに記述したこと

背景画像を指定するには、

cssにbackground-image: url("相対パスまたは絶対パス")とのことだったので下記のように記述しました。

 

.background {
background-image: url("images/background.png");
background-size: 50%;
}

 

app/assets/stylesheets にimagesディレクトリを作り、その中に背景にしたい画像(background.png)を入れて相対パスで指定しています。

これで背景に希望の画像を設定することができました。

 

問題発生

 

しかしデプロイ時に問題が発生しました。

何故か背景の画像だけが反映されていなかったのです。

 

他の変更した箇所は反映されているのに。

 

調べてみるとどうやらCSSはデプロイ時に反映されないことがあるというのです。

このせいか〜!と思い込んだ私は、再プリコンパイルを実行したり、unicornを再起動させたり、Nginxを再起動させたり、サーバーを再起動させたり、、、

それでも背景は真っ白のままです。どうして!!!!!!!

 

そもそも、他のCSSは反映されているので原因は他のところにあったのでした。

背景画像だけapp/assets/stylesheets/imagesに入っているということ。

反映されている他の画像は、app/assets/imagesに入っているのです。

 

そのことをふと思い出した私は、背景画像background.pngapp/assets/imagesディレクトリへ移動させ、CSSを下記のように編集しました。

 

.background {
background-image: url("../../images/background.png");
background-size: 50%;
}

 

これで反映完了!と思ったのですが…。

 

今度はlocalですら背景が真っ白に

 

パス間違えた?!画像名間違えた?!あれ???何で???

 

調べてみると今度はすぐに原因が判明しました。

そもそもRailsではbackground-image: url("assets/images/background.png");

の書き方では動かないそうです。

初めからこれを知っていれば、、。

 

解決策

 

①このままapp/assets/imagesに背景画像を置いておいて、csscss.erbに変更、asset_pathヘルパーを使いコードを下記のように編集する

 

.background {
 
background-image: url("<%= asset_path('background.png') %>");
background-size: 50%;
}

 

asset_path('background.png'はアセット読み込みパスのいずれかにある画像ファイルが指定されたと解釈してくれるそうです。

 

public/imagesに背景画像を移動させて、コードを下記のように編集する

(今度はファイル名はcssのままでよいです。)

.background {
background-image: url("/images/background.png");
background-size: 50%;
}

 

public以下においたファイルはプリコンパイルされないので画像の名前が変わらず、パスで指定ができるとのこと。なるほど。

 

今回は①の方法を取りました。

他の画像は既にapp/assets/imagesディレクトリに配置されていて、あちこちに画像があるのは気持ちが悪かったので。

 

無事ローカルでも開発環境でも背景の画像を指定することができました。

まさかここでつまづくとは、、。という気持ちでしたが、それまでふ〜んそうなんだ〜と何となくでしか理解していなかったアセットパイプラインやプリコンパイルについてちょっと理解が深まって結果的によかったです。

 

 

おしまい。

 

 

参考資料

https://railsguides.jp/asset_pipeline.html

https://qiita.com/knxrvb/items/c78c08a0a3c9d4095f3f#comments

https://qiita.com/wadako111/items/03bc00d914e62243a511