background-image is showing error from css file

I am stuck at this stage. I would seek help to fix this problem. This background-image is not loading from css file. Other css is loading but this background-image is not loading. Here is the code.

base.html:
{% load static %}

Document {% include 'partials/_header.html' %}
<main> {% block content  %}{% endblock  %}</main>

{% include 'partials/_footer.html' %}
```````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` **index.html:**

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

This is HOME PAGE

{% endblock %}

**styles.css:**

.first {
    height: 100vh;
    width: 100vw;
    background-image: url('{% static "img/happy.jpg" %}');
}


.text {
    color: red;
}

Template tags don’t work in CSS files, they only work in Django templates. You must either hardcode the path in the CSS file, or put that bit of CSS in the <head> of a Django template.

1 Like

To use it the way you want, you need to use the style tag in your html, not css file.

# base.html
{% load static %}
<head>
  <style>
    .first {
        height: 100vh;
        width: 100vw;
        background-image: url('{% static "img/happy.jpg" %}');
    }
    .text {
        color: red;
    }
  </style>
...
</head>
....
1 Like

Just to add to the other reply your css should look something like this if you want it in the css.

.first {
    height: 10vh;
    width: 100vw;
    background-image: url('/static/img/happy.jpg');
}

The url of the static file will be /static/img/happy.jpg . This is assuming that the STATIC_URL to be /static/ (which is the default iirc).

Replace the /static/ with what you have set in the settings file in case it is different.

Edit - Just saw other reply which is a good solution if you don’t need the css in a different file and are okay to add css in the html.

1 Like
  1. Try the absolute path on the css: background-image: url('/static/img/happy.jpg');
  2. Be sure that happy.jpg image is located in the static/img/ directory
1 Like

Thank you very much. This problem is solved.
Can you help me in other Django problem. I am not able to provide LinkedIn account url in when I try to create a link in footer section. Can you please provide me the code?

I also need to create a Django-button. When this button will be clicked I can open a new web page that I have created with views.py, urls.py(app-level).

Thank you very much. This Problem is solved now.

1 Like

Thank you very much. This problem is solved now

Thank you very much this problem is solved now.

Where is your code? Provide some info here in order to get help. :slight_smile:


Please stop posting images of code and error messages here. Copy/paste the code (or error message) into the body of your post, surrounded between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```.

Now, regarding your specific error in the previous post, that LinkedIn url is a constant, not something needing to be processed by the url tag. It should be rendered simply as <a href="https://...">...</a>

2 Likes

If the problem is solved, choose an answer so others can know.