Django look css images into wrong directory

Question

I have following settings for static files

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static_my_proj'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static_cdn', 'static_root')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static_cdn', 'media_root')

In the css file I do this

#mydiv{
    background-image:  url('/img/myimg.png');
}

And my directory structure

project root
 - static_my_proj
  - css
  - img
  - js

I can see from network tab that it looks for the image in static/css/img/myimg.png. However, if I do this then it works. How can I make it without using ../ at the beginning?

#mydiv{
    background-image:  url('../img/myimg.png');
}

There is a slight advantage to using relative paths in your CSS - if you change your static files settings then you will not need to change any of the image paths — Iain Shelvington
– Iain Shelvington, Commented Aug 31, 2019 at 5:36
@IainShelvington /static/img/myimg.png seems to be working. — asdfkjasdfjk
– asdfkjasdfjk, Commented Aug 31, 2019 at 8:08

Myzel394 · Accepted Answer · 2019-08-31 06:40:16Z

1

You better use {% static 'img/myimg.png %}. Hardcoded paths aren't good, because if you change your static folder, you would have to change all your code. You can't use static in your css files, but in your templates. Your code would look like this:

yourHTML.html:

{% load staticfiles %}

<div id="mydiv" style="background-image: url({% static 'img/myimg.png' %})">

</div>

answered Aug 31, 2019 at 6:40

Myzel394

1,3273 gold badges22 silver badges48 bronze badges

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

2 Comments

asdfkjasdfjk Over a year ago

I would avoid using inline styles in html.

Myzel394 Over a year ago

You can also use a style tag. If then, I would recommend you using django-sekizai to make sure your code is only once in your template.

Collectives™ on Stack Overflow

Django look css images into wrong directory

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related