Background image not found (404) in django

Question

I intended to set a background image in the body of my HTML page and so I merrily tried following steps:

Set STATIC_URL and STATIC_ROOT in the settings.py and pass the URL Patterns in the urls.py.
Run static deployment python manage.py collectstatic
Pass inline css in the body tag <body style="background-image: url('{% static '34.jpg' %}');"> into the base html file.

but this all led me to this!

GET http://localhost:7000/static/34.jpg 404 (Not Found)

As usual below are my suspects/guilt-ridden files/codes for the case:

1. base.html

<!DOCTYPE html>
<html>
{% load static %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>HR Suite</title>
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <style>
            header {
             background-color: #4dacff;
             padding: 30px;
             text-align: center;
             font-size: 60px;
             color: white;
            }
            body {
                font-family: Arial, Helvetica, sans-serif;
            }

        </style>
    </head>

    <body style="background-image: url('{% static '34.jpg' %}');">
        <header>
            <p>HR Suite</p>
        </header>
        <div class='row'>
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

2. settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
    'uploads.core'
]

ROOT_URLCONF = 'uploads.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'uploads/templates'),],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media',
            ],
        },
    },
]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
AKASH_ROOT = 'C:\\Users\\Akash\\Documents\\Test'

3. urls.py

urlpatterns = [
    url(r'^admin/', admin.site.urls),

    url(r'^$', views.login_form, name='login_form'),

    url(r'^upload/$', views.simple_upload, name='simple_upload'),

    url(r'^drop_down/$', views.drop_down, name='drop_down'),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.AKASH_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Though, I am continuously trying to solve this case and find out the reason (read culprit) behind. But in case you can see the one, please share your thoughts. The scene is based out on Django version 1.9.8.

Is `34.jpg` supposed to be in static root or media root? If it is in media root, you should try openning `http://localhost:7000/media/34.jpg` — nima, Jan 26 '20 at 14:26
actually I copied at both directories and but both of them gave the same 404 exception — Akash Narayan, Jan 26 '20 at 14:31
@n1rna My document_root in urls.py was pointing at AKASH_ROOT instead of MEDIA_ROOT. Got it ! — Akash Narayan, Jan 26 '20 at 14:36

score 0 · Answer 1 · answered Sep 30 '20 at 05:31

0

I too faced this error while practising, here is what I did and it worked for me. Change <body style="background-image: url('{% static '34.jpg' %}');"> to

<body style="background-image: url("static/34.jpg");">

Hope this solves your issue

answered Sep 30 '20 at 05:31

Krishan Rupani

1

Please do not forget to mention why inline CSS is rather bad: https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – jasie Sep 30 '20 at 05:53

Background image not found (404) in django

1 Answers1