CSSのbackground-imageで画像が表示できない場合の対処法

Question

前提、実現したいこと

CSSにて画像の表示を行いたい

CSSを勉強しbackground-imageにて画像の表示を行う内容を学習しています。
外部でCSSを作成し、JPGを読み込もうとしたところ画像が表示されませんでした。
文字等へのCSSは機能しているためCSS自体は有効になっていると思うのですが、画像が表示されない原因がわかりません。
※使用しているデバイス：IPAD



![

発生している問題・エラーメッセージ

CSSにて画像ファイルが読み込まれない

該当のソースコード

body {
	height: 500px;
	background-image: url("image/gero.JPG");
	color: red;
}

試したこと

・他のJPG、CSSファイルでも同様な現象が発生。
・スペース、半角/全角の確認。
・JPGファイルの拡張子をjpgにしても変化なし。

補足情報（FW/ツールのバージョンなど）

テキストエディタ：Textastic

Comments

[tiitoi]

IOSのファイルシステムについて詳しくないですが、CSS の指定が「image」で実際のフォルダ名が「Image」になってますが、大文字小文字は区別しないんでしたっけ？

[Kawa_taka]

i→Iに変更したら解決しました！
ずっと分からなくて困っていたので本当に助かりました。ありがとうございます。

[tiitoi]

動作したようでよかったです。Windows だとパスの大文字小文字は区別しないのですが、iOS は区別するみたいなので注意する必要がありますね。
解決済みであれば、質問は自分で回答をつけてクローズしていただけますか？

[Daregada]

現在のiOSのファイルシステムはAPFSのcase sensitive(大文字小文字を区別する)の設定ですね。macOSだとボリューム作成時に選択できる(case sensitiveだと動かないアプリが存在するため)。

Answer 1

画像フォルダの名前が一致していなかった。
CSSのurl(“image/gero.JPG”)をurl(“Image/gero.JPG”)に修正。