背景画像を表示させたいです

Question

実現したいこと

cssに書いてある背景画像を表示したいです

発生している問題・分からないこと

サイトを公開しようとしたところ、背景画像が表示されないです。他の画像は表示されるのですが、cssからの背景画像のみ表示できないです。

エラーメッセージ

指定された画像ファイル background-4876988_1280.png がサーバー上の /images/ ディレクトリ内に存在しません。ブラウザはCSS（style.css）の指示に従って画像を要求しましたが、サーバーは「404 Not Found」を返し、代わりにエラーページのHTMLを返却しています。

該当のソースコード

<section class="cta cta-img">
            <p class="cta-title">
                登録介護士を<br class="sp-only">
                無料でご覧いただけます。
            </p>
            <button class="cta-btn">
                <a href="#">
                    無料で資料ダウンロード
                </a>
            </button>
        </section>

/*ctaセクション*/
.cta-img {
    background-image: url("../images/70651bfde0f8205b73cf1887e2d52f90fb5512e9.jpg");
    background-size: cover;
    background-position: center;
}

.cta {
    padding: 60px 0 61px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.cta-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
}

.cta-title .sp-only {
    display: none;
}

.cta-btn {
    width: 320px;
    height: 52px;
    background-color: #fff;
    border-radius: 25px;
    text-align: center;
}

.cta-btn a {
    width: 100%;
    text-decoration: none;
    font-size: 20px;
    color: #007FC6;
    font-weight: bold;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

パスの違いや階層の違いをAIに指摘されたがすでに確認済みである。

補足

特になし

Comments

[Lhankor_Mhy]

フォルダ構成を教えてください。
CSSファイルとHTMLファイルとimagesフォルダはどこにありますか？

[ベータ]

コメントありがとうございます。サーバーのファイルが更新されてなく表示されていなかったようです。問題は解決いたしました。ご協力いただきありがとうございました。

Answer 1

原因はコードではなく、

サーバー側へ画像ファイルが正しく反映・アップロードされていなかった

ことです。

エラーメッセージ：

404 Not Found

は、

CSS自体は正常
↓
background-image のURLも解決できている
↓
しかし画像ファイル実体がサーバー上に存在しない

ことを意味しています。

今回のCSS：

.cta-img {
background-image: url("../images/70651bfde0f8205b73cf1887e2d52f90fb5512e9.jpg");
}

自体に大きな問題はありません。

また、

他の通常画像(imgタグ)は表示される

のに、

background-imageだけ404

だったため、

可能性としては：

・サーバーへ画像が未アップロード
・FTP同期漏れ
・デプロイ未反映
・古いキャッシュ
・ビルド対象外

などが考えられます。

実際、質問者様の追記どおり：

サーバーの更新が止まっていた

のが原因だったようです。

つまり：

ローカルでは画像存在
↓
CSSも正常
↓
公開サーバーだけ画像不足
↓
404

という状態です。

同様の問題を防ぐためには：

1. デプロイ後に画像URLへ直接アクセス確認
2. DevTools → Network で404確認
3. FTP/デプロイ対象へ images フォルダ含有確認
4. キャッシュ削除（Ctrl+F5）

を行うと切り分けしやすいです。

特に：

background-image は HTML上に直接出ない

ため、

Networkタブ

確認が非常に重要です。

Answer 2

エラーメッセージにある「background-4876988_1280.png」についてCSSの中に記述が見当たりません。おそらく記述が間違っているだけだと思います

Comments

[ベータ]

コメントありがとうございます。サーバーの更新が止まっており表示されてなかったようです。問題は解決いたしました。ご協力ありがとうございました。