はじめに
本記事では、私が画像を背景にするために、体験したエラーと解決方法を記述します。
間違いがありましたらご指摘いただけますと幸いです。
エラーの内容とコード
エラーの内容
やや見づらいですが、
画像を表示させようとCSSファイルにて記述しましたが、
なかなか画像が表示されませんでした。
ステータスコードは404（Not Found）でした。
ステータスコード一覧
コード
main_menu.css
.menu-details {
background-image: url("greenhot.png"); ←ここの部分！
background-position: center;
background-size: 100%;
width: 50vw;
height: 15vh;
display: block;
text-align: center;
vertical-align: middle;
padding: auto;
}
実施したこと
①"greenhot.png"→"../images/greenhot.png"
不正解
②"greenhot.png"→絶対パス
不正解
③リセットCSSを別のものに
不正解
④url("greenhot.png")→image-url("greenhot.png")
不正解
⑤なぜかbackground-colorはできる？
background-image→background
不正解
⑥body要素にbackground-image: url("greenhot.png");
不正解
⑦試しに他のCSSファイルで背景画像を設定できるか。
できない
⑧"greenhot.png"→"images/greenhot.png"
不正解
結論
main_menu.scss
.menu-details {
background-image: image-url("greenhot.png"); ←ここの部分
background-position: center;
background-size: 100%;
width: 50vw;
height: 15vh;
display: block;
text-align: center;
vertical-align: middle;
padding: auto;
}
①.css→.scss
②background-image: url("greenhot.png");
→background-image: image-url("greenhot.png");
で画像が背景になりました。
8時間かかった末に、見ることができた背景は光り輝いて見えました。
終わりに
CSSとSCSSの違いについて、
言葉で説明しろと言われたら、正直微妙です。
SCSSだと、
・ネストができる
・記述がCSSより楽
・変数を使用できる。
・演算が使用できる。
などがあるようで、CSSよりも便利なイメージがあります。
以下が参考にした記事です。
SCSS（SASS）とCSSの違いについて
CSSとSCSSの違い
明日までデザイン性をあげるべくオリジナルアプリを進める予定です。
明日も頑張ります！！
↧