現在作成している自作のアプリケーションで、
上のように背景に画像を設定したく、
CSSでbackground-image プロパティを使えば良いことが分かり、
以下のように記述しました。
.sample-contents{width:100vw;height:350px;background-image:image-url('sample-top.JPG');background-repeat:no-repeat;background-size:cover;background-position:center;}これで画像が出るはず！だったんですが、画像が表示されなかったので、
解決するために試したこと等を記録します。
解決したかったこと
CSSでbackground-image プロパティを使ったが、画像が表示されない
今回の解決方法
記述していた.css ファイルの拡張子を.scss に変更したら表示できた。
というわけで本当にただのケアレスミスでした。
ただまだcssとscssがどう違うのかや、何故cssだと表示できなくてscssだとできたのかはちゃんと理解できていないのでこれから勉強します。
解決するまでにチェックしたポイント
background-color は表示できるか
クラス名のスペルミスが無いかの確認も兼ねて一旦background-color を指定すると、
きちんと表示できました。
じゃあ画像に何か問題があるのかと考えて次へ。
画像パスの指定は合っているか
app/assets/images にちゃんと保存してあるかどうかを確認。
VSCodeの場合、ファイルを右クリックで画像のようにパスがコピーできたので、パスは確かだろうと確認できました。
以上です。