前提

初心者の初心者による初心者のための記事です

実行環境

Rails 5.2.1

やりたいこと

Railsアプリ内で、よくあるホームページのトップページの一面に背景画像を設定するようなことを目指します。

HTMLファイルを作成

まず、なんでもいいので適当にhtmlファイルを作りましょう

hogehoge.html

<div class="main-container">
  <h1>This is my Portfolio Site</h1>
  <p>これは私のポートフォリオサイトです</p>
</div>

これでrails sでサーバーを起動して、ブラウザで確認するとこんな感じになりますね
⬇️

このページの一面に背景画像を指定することを目指します

画像を配置

皆さんは、rails newしたアプリ内に画像を指定するとき、画像ファイルをどこに置いておけばいいか、悩んだことありませんか？

候補としては下の二つのパターンが考えられるかと思います。

①assets/imagesの配下

②public/imagesの配下

railsのアプリで画像を配置しようと思ったらこのどちらかになるかと思います。
初心者でまだRailsの勉強始めたばかりだと、どっちに置いたらいいんだろう？って迷ってしまうかと思います。

結論、どちらに置いても画像を読み込むことはできます。

どっちに置いたらどうこうという細かい話は後回しにして、とりあえずこの２パターンで背景画像を指定するためのCSSファイルの書き方を先にお伝えします！！

CSSファイルの書き方

それでは、CSSファイルを書いていきます。
まずは、
①のassets/imagesの配下に画像を配置した場合から。
この時の画像パスの指定方法で手っ取り早いやり方があるのですが、ちょっと一工夫が必要です。
まず、CSSファイルの末尾に、「erb」をくっつけて「hogehoge.css.erb」という形でRubyの記法が使用できるようにファイルの名前を変更します。("hogehoge"の部分は適当です)

↓こんな感じ

hogehoge.css.erb

.main-container {
  background-image: url("<%= asset_path('hogehoge.png') %>")
  height: 800px;
  background-size:cover;
}

これでassets/images配下のhogehoge.pngというファイルを読み込んで、ブラウザ上で背景画像として読み込むことができます。
（heightやbackgroud-sizeの指定はわかりやすくするために明記していますが、ここは各自調整してみてください！）

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

こんな感じで、erb式を使って画像パスを指定するとうまくいきます。

次に、
②public/images配下の画像ファイルを読み込む際のCSSの書き方いきます！！！
今回はCSSファイルにerbを追記する必要はありません。

hogehoge.css

.main-container {
  background-image: url("/images/hogehoge.png");
  height: 800px;
  background-size: cover;
}

これでブラウザ上で背景画像が表示されているはずです！！
先ほどとの違いは、
・Rubyのerb式を使っていない
・/imagesからパスを指定している

この２点ですね！！！

ここ、初心者の方だと、「なんで"public"からパスを指定しないでimagesからでいいんだろう？？」って疑問に思いませんか！？僕は思いました！！！

これは、Rails特有のルールで、public配下に配置した画像を読み込む場合は、最初からpublicを読み込むことは前提になっていて、「/images/ファイル名」みたいに/imagesからパスを指定すればいいっていうことになってるみたいです！！

結局、assets配下かpublic配下、どっちがいいの？

これは、Railsのアセットプリコンパイルについての勉強をする必要があるので、詳しいことは　Railsガイドのアセットプリコンパイルの章
こちらを参照していただいた方が理解が深まるかと思います。

簡単に私の拙い理解（参考程度に（笑））で説明すると、

普段Railsでアプリケーション開発をしているときはDevelopment環境で開発しているかと思います。これをProduction環境にアップロードする際に、Railsではアセットプリコンパイルという作業をしなければなりません。
アセットっていうのはjsファイルとかcssファイルとか、画像ファイルとかのことですね。
これって開発していくうちにapplication.cssとか、hogehoge.cssみたいな感じでファイルがたくさん増えていってしまうと思うのですが、
それらをプリコンパイルする。つまり、たくさんあるファイルを事前にひとまとめにして、スッキリさせちゃおうみたいな、そんなイメージです。

ということは、assets配下に画像ファイルを置いた場合、もちろん、アセットプリコンパイルの対象に含まれます。

この時に、Railsは画像ファイルの名前にランダムな文字列を与えて変換してファイルを認識するので、画像を読み込む時に便利なんだそう←

逆に、public配下に置いた際にはアセットプリコンパイルの対象からは外れるので、ファイル名はそのままになってしまいますね。

結論！！！

以上のことから、基本的に、Railsアプリでは、特別な理由がない限り、assets配下のimagesの中に画像ファイルを置いておくのが無難、ということで落ち着きました。
ただbackground-imageを指定するだけでも、Railsの中でやろうとするとこんなに奥が深いんですね！というお話でした。

Railsでbackground-image(背景画像)を設定する

前提