Django CSSのbackground: url('')から画像が読み込まれない。

Question

前提・実現したいこと

djangoを使用し、ダウンロードしたテンプレートを使用したい。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

CSSのbackgroundから画像を読み込まれない。

該当のソースコード

#headerwrap {
  background: url('/static/img/header_bg.jpg') no-repeat center top; #この部分
  margin-top: -50px;
  padding-top: 120px;
  text-align: center;
  background-attachment: relative;
  background-position: center center;
  min-height: 650px;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

試したこと

BASE_DIRの確認,及びbootstrap4の追加

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Passion_app.apps.PassionAppConfig',
    'bootstrap4',#追加
    'accounts.apps.AccountsConfig',

    'django.contrib.sites',
    'allauth',
    'allauth.account'
]
＜省略＞

.
.

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

おそらく問題ない。

htmlからstaticの読み込み。

{% load static %}

これも問題ない。

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

ちなみにhtmlからのstaticFileの読み込みはできています。

バージョン：Django3

すみませんが、知見を貸してください。m(_ _)m

Comments

[Yasumichi]

開発用サーバーで起動している感じですか？
また、ブラウザーの開発ツールのネットワークタブとかで、/static/img/header_bg.jpg の取得の結果とか出ていますか？

[Kantan.lab]

ありがとうございます！
開発サーバーでおこなっています。

ログはこちらです。
[26/Aug/2020 22:15:09] "GET / HTTP/1.1" 200 24176
[26/Aug/2020 22:15:09] "GET /static/lib/icomoon/icomoon.css HTTP/1.1" 200 22148
[26/Aug/2020 22:15:09] "GET /static/lib/bootstrap/css/bootstrap.min.css HTTP/1.1" 200 121200
[26/Aug/2020 22:15:09] "GET /static/lib/jquery/jquery.min.js HTTP/1.1" 200 97163
[26/Aug/2020 22:15:09] "GET /static/lib/easing/easing.min.js HTTP/1.1" 200 2303
[26/Aug/2020 22:15:09] "GET /static/lib/php-mail-form/validate.js HTTP/1.1" 200 3501
[26/Aug/2020 22:15:09] "GET /static/lib/bootstrap/js/bootstrap.min.js HTTP/1.1" 200 37045
[26/Aug/2020 22:15:09] "GET /static/img/team/team01.jpg HTTP/1.1" 200 36450
[26/Aug/2020 22:15:09] "GET /static/img/team/team02.jpg HTTP/1.1" 200 29239
[26/Aug/2020 22:15:09] "GET /static/img/iphone.png HTTP/1.1" 200 303220
[26/Aug/2020 22:15:09] "GET /static/img/team/team04.jpg HTTP/1.1" 200 27307
[26/Aug/2020 22:15:09] "GET /static/img/team/team03.jpg HTTP/1.1" 200 43755
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio01.jpg HTTP/1.1" 200 68981
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio02.jpg HTTP/1.1" 200 58455
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio03.jpg HTTP/1.1" 200 66043
[26/Aug/2020 22:15:09] "GET /static/img/macbook.png HTTP/1.1" 200 255584
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio06.jpg HTTP/1.1" 200 30554
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio04.jpg HTTP/1.1" 200 100674
[26/Aug/2020 22:15:09] "GET /static/img/portfolio/folio05.jpg HTTP/1.1" 200 94409
[26/Aug/2020 22:15:09] "GET /static/lib/icomoon/fonts/icomoon.woff HTTP/1.1" 200 76384
[26/Aug/2020 22:15:10] "GET /static/img/favicon.png HTTP/1.1" 200 491

[Yasumichi]

/static/img/header_bg.jpg のログが出ていないですね。

ブラウザーの開発者ツールのインスペクター（Firefox の場合。Chrome だと Elements タブ）で要素を選択した際に適用されている CSS に取り消し線とか、ついてたりしますか？

場合によっては、キャッシュが悪さをしている場合も。（古いスタイルシートがキャッシュに残っているとか）

[Kantan.lab]

キャッシュを削除したら表示されました！ありがとうございます。
すみません、お手すきであればどのような原理なのでしょうか？

[Yasumichi]

うまく説明できるか分かりませんが。

画像やスタイルシートなど静的なコンテンツの場合、毎回サーバーに取得に行くのは、無駄なので通常、ブラウザーがローカルディスクなどにキャッシュして、そちらを利用するようになっています。

この辺、キャッシュを使わないように制御をサーバー側で行う方法があったりします。未検証ですが、

Djangoで全ページキャッシュ禁止にする方法
https://masshiro.blog/django-nocache/

などを参考にしてみてください。

「django ブラウザキャッシュ 無効」で検索しました。

[Kantan.lab]

よく分かりました！ありがとうございました。
良ければ回答欄に回答を入れてください。ベストアンサーにしたいので。

Answer 1

ブラウザーのキャッシュに画像を指定する前の古いスタイルシートが残っていて反映されていない可能性があります。

ブラウザーのキャッシャを削除してみて、再度、アクセスしてみてください。

※Firefox の場合、開発ツールの詳細設定で「HTTP キャッシュを無効化（ツールボックスを開いているとき）」といった設定を活用すると良いかもしれません。Chrome 等にも似たような設定が存在すると思います。