未経験エンジニア

【sass】scss内の記述で背景画像を表示する方法!railsのimage素材配置場所!

背景画像を表示させたいが、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;

.cover{
          background-image:  image-url(‘records/library.jpg’);
          background-size:  cover;
}

④表示されたかを確認する。

補足

・拡張子は省略しても表示される。

・background-sizeプロパティを指定しないと、画像一部分だけの表示となってしまう。

・背景画像を透かしたい場合は、opacityプロパティを使う。

.cover{
          background-image:  image-url(‘records/library.jpg’);
          background-size:  cover;
          opacity:  0.7;
}

所感

アセットパイプラインでデプロイ時に画像エラーが起きたので、もう少し仕組みを勉強する必要があると思いました。また、public内に配置する方法もあります。参照する場合は、パスの記載が少し違うらしいです。publicは投稿画像が格納されるディレクトリなので、app/assets/images内が背景画像などの設定には使えそうです。