django css background-image url not working

Question

so i have this header-task class but for some reason the background-image wont show up but when i click the url in visual studio code its show me the image from the url. does anyone know what's the problem to my code here? thanks

 .header-task{
  background-image: url("..\image\nightlandscape.jpg");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

here is the picture of my visual studio code when I click the URL image

What is your folder structure? I believe that the path to your image is incorrect. Have a look here: docs.djangoproject.com/en/3.0/howto/static-files — Jakub A Suplicki
– Jakub A Suplicki, Commented Jun 20, 2020 at 5:33
Please see this post to get a solution stackoverflow.com/questions/62471742/… — JSRB
– JSRB, Commented Jun 20, 2020 at 6:30
i don't think the static is the problem because i load the static in my html one and it work perfectly maybe the url on my css is the problem — adhi_wika
– adhi_wika, Commented Jun 20, 2020 at 6:47

Jakub A Suplicki · Accepted Answer · 2020-06-22 23:10:29Z

2

I did some digging but personally I do not have the environment to test it out. So you might need to check it for yourself.

Can you please try the below:

 .header-task{
  background-image: url("static(image/nightlandscape.jpg"));
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

If your STATIC_URL is '/static/' (I believe that is in settings.py), this will be rendered as:

 .header-task{
  background-image: url("/static/image/nightlandscape.jpg");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

Another possibility:

 .header-task{
  background-image: url('{% static 'nightlandscape.jpg' %}') or url('{% static "/img/nightlandscape.jpg" %}')
  background-repeat: no-repeat;
  background-size: 100% 200%;
  height: 120px;
  position: relative;
}

but for that I think you would need to load static files first: {% load static%} in your HTML and then load the stylesheet.

<head>
    <style>
        {% include "path/to/my_styles.css" %}
    </style>
</head>

Possibly simply changing url("..\image\nightlandscape.jpg") to url("../image/nightlandscape.jpg")

edited Jun 22, 2020 at 23:10

answered Jun 20, 2020 at 8:59

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rubel Biswas Over a year ago

background-image: url("/static/image/nightlandscape.jpg"); only this one worked for me.

Mahfuzur Rahman · Accepted Answer · 2021-05-02 18:57:52Z

2

It's working for me:

background-image: url( '/static/images/moon.jpg');

Happy coding.

answered May 2, 2021 at 18:57

Mahfuzur Rahman

5447 silver badges12 bronze badges

Comments

saharsh_bhatia · Accepted Answer · 2020-06-20 09:06:42Z

0

I do have a similar use case, I call the background image in the CSS file as below

.class-name{
  background-image: url('../img/img.png');
}

And I have a folder structure which corresponds as:

Static
   Css
      file.css
   Img
      img.png

It might be the folder structure that it can't resolve.

answered Jun 20, 2020 at 9:06

saharsh_bhatia

4574 silver badges8 bronze badges

Collectives™ on Stack Overflow

django css background-image url not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related