background-image is showing error from css file

Using Django Templates & Frontend
1

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;
}
2

error
error3000×1680 180 KB

3

screen
screen3000×1680 133 KB

4

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
5

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
6

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
7
  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
8

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).
9

Thank you very much. This Problem is solved now.

1 Like
10

Thank you very much. This problem is solved now

11

Thank you very much this problem is solved now.

12

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

13

linkedin
linkedin3000×1680 219 KB

14

urlerror
urlerror3000×1680 209 KB

urlerroroutput
urlerroroutput1920×1075 69 KB

15

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
16

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