#前提
・AWS EC2は導入済み

・背景画像は『app/assets/images』フォルダに格納している

#バージョン
rubyのバージョン　ruby-2.6.5
Railsのバージョン Rails:6.0.0

#はじめに
background-imageプロパティを使って、Herokuやローカル上では背景画像が表示されているのに
AWS EC2でデプロイしたら、背景画像が表示されないので、それを解決したい方向けの記事となっています。

#概要
以下2点を変更して、再度デプロイすると背景画像が表示されます。

①CSSファイルをSCSSファイルに変更する。

②背景画像を指定するCSSの記述をbackground-image: image-url("画像名");に変更する。

#詳細
##①CSSファイルをSCSSファイルに変更する。
以下のどちらかのパターンで行えます。

・ファイル名の拡張子を、 .CSS → .SCSSに変更する。
・背景画像を表示させているviewの拡張子.SCSSファイルに、②の内容を記述する。

※私は後者を選びました。というのも、SCSSに拡張子を変更してしまうと、それまで記述したCSSの記述に影響が出るためです。

##②背景画像を指定するCSSの記述をbackground-image: image-url("画像名");に変更する。
SCSSファイルの内容を以下のように変更します。

（変更前）

app/assets/stylesheets/~.scss

background-image: url(画像名);

↓

（変更後）

app/assets/stylesheets/~.scss

background-image: image-url("画像名");

※""（ダブルクォーテーション）を忘れないようにしてください

#③デプロイして確認
確認し問題なければ終了です。
なお、ローカル内でも、同様の表示ができます。

#背景画像が表示されない理由
表示されない理由としては、Asset Pipelinの仕組みが関係しています。

仕組みの１つとして、※1)キャッシュされていた既存のアセットを無効化を行います。というのも、キャッシュの効果を使った悪用を防ぎ、デプロイさせる役割をしているためです。

変更前のbackground-image: url(画像名);記述では、「url」がファイル名は以前と変化していないと認識され、既存のキャッシュとしてみなされます。

したがって、既存の古いキャッシュでは読み込めない状態となるので、、画像を読み込んでもらえません。

（変更前）

app/assets/stylesheets/~.scss

background-image: url(画像名);

そこで、
「url」を指定するのではなく、Railsが指定している「image-url」メソッドを使うことで、デプロイ時にapp/assetsから読み込めるようにします。

（変更後）

app/assets/stylesheets/~.scss

background-image: image-url("画像名");

※1) キャッシュとは、データを一時的に保存することで、データの処理速度を速める考え方、仕組みのこと。

#補足
AWS EC2をデプロイする方法を以下に載せていますので、よろしければご参考ください。
https://qiita.com/narimiya/items/2e642b60baa4002c4bee

assetsディレクトリに関しても以下に載せていますので、よろしければご参考ください。
https://qiita.com/narimiya/items/73ca907c74b4c615f39d

以上です。