Background-image is not loading from css file

Using Django
1

I have been stuck here in this stage. I am not able to load the background-image for extended HTML file from CSS file. I shall be grateful if anyone can help me to fix this error. At the end of the output, it shows ‘404 1890’. Possibly, there is a minor syntax error.
Here is the required code:-

**base.html:**
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{%static 'css/style.css' %}">
    <title>Document</title>
</head>
<body>
    {% include 'partials/_header.html' %}
    
    <main> {% block content %} {% endblock %}</main>

    {% include 'partials/_footer.html' %}
</body>
</html>

index.html:
{% extends ‘base.html’ %} {% block content %} {% load static %}

This is homepage

{% endblock %}

**style.css:**
.block {
    background-image: url('{% static "img/img1.jpg" %}');
}

.cube {
    color:blue;
    text-align: center;
    
    
}

OUTPUT
[29/Jul/2024 10:09:49] “GET / HTTP/1.1” 200 411
[29/Jul/2024 10:09:49] “GET /static/css/style.css HTTP/1.1” 304 0
[29/Jul/2024 10:09:49] “GET /static/css/%7B%%20static%20%22img/img1.jpg%22%20%%7D HTTP/1.1” 404 1890
PS C:\Users\com\Desktop\trial\myproject>

2

Hello!

In you CSS file, I believe you are using Django syntax to generate the URL to you’r image. Instead, I suggest you try using the absolute path to the image, which should resolve the HTTP 404 error code.

For reference, see the examples in the MDN website.

MDN:

3
  1. The {% load static %} should go to index.html
  2. Make sure that the path to the img1.jpg file is correct. Use an absolute path to test it.

So,
base.html::


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
   {% load static %}
    {% include 'partials/_header.html' %}
    
    <main>
        {% block content %}
        {% endblock %}
    </main>

    {% include 'partials/_footer.html' %}
</body>
</html>

index.html:


{% extends 'base.html' %}


{% block content %}
    This is the homepage.
{% endblock %}

style.css:

.block {
    background-image: url('{% static "img/img1.jpg" %}');  #test with absolute path
}

.cube {
    color: blue;
    text-align: center;
}

Also, run python manage.py collectstatic to collect all your static files in the static directory.