Django 2 Images from STATIC_URL is not loading in Css

Question

I'm working on a Django(2.1.7) project in which I need to load some images in css file. Here's what I have so far:

From settings.py:

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/assets/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'assets'), ]

I have a directory in my main project folder named as assets and also have 'django.contrib.staticfiles' in INSTALLED_APPS and then I have mentioned some images in css as:

background: url('/assets/images/demo.png') center no-repeat;

The image is available in the images folder but not displaying in the template.

What can be wrong here?

Did you specify {% load static %} at the beginning of your template? — Rajan Sharma
– Rajan Sharma, Commented Mar 6, 2019 at 14:30
the path you specify in your css is relative to your css file path. So this would only work if your css file is in a directory that contains the 'assets' directory. — dirkgroten
– dirkgroten, Commented Mar 6, 2019 at 14:31
Assuming you also have a /assets/css/ directory where your css file is located, the link to your image should be "../images/demo.png". — dirkgroten
– dirkgroten, Commented Mar 6, 2019 at 14:32
Hi @RajanSharma, I'm inside the css file where {% load static %} doesn't work and template is working. — Abdul Rehman
– Abdul Rehman, Commented Mar 6, 2019 at 14:32
Hi @dirkgroten I have images folder inside my assets folder`. — Abdul Rehman
– Abdul Rehman, Commented Mar 6, 2019 at 14:33

dirkgroten · Accepted Answer · 2019-03-06 14:33:32Z

1

The path you specify in your css is relative to your css file path. So this url would only work if your css file is in a directory that contains the assets directory.

The question is where is your css file. Assuming it's in a /assets/css folder (inside assets), your url should be:

background: url('../images/demo.png') center no-repeat;

answered Mar 6, 2019 at 14:33

dirkgroten

20.8k2 gold badges32 silver badges46 bronze badges

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

Comments

Devang Padhiyar · Accepted Answer · 2019-03-06 14:46:10Z

0

Add below snippet to your urls.py file

# <----------- rest of the code----------->
urlpatterns += static('/assets/', document_root=settings.STATIC_ROOT) + static(
    settings.STATIC_URL, document_root=settings.STATIC_ROOT
)

answered Mar 6, 2019 at 14:46

Devang Padhiyar

3,7153 gold badges25 silver badges42 bronze badges

1 Comment

dirkgroten Over a year ago

This is not needed since the OP is using 'django.contrib.staticfiles' so in debug=True mode, runserver automatically finds the static files in the various /static directories of the apps and inside the /assets directory (since he added that to STATICFILES_DIRS). And even then, this should definitely be removed in production settings (so wrap in if settings.DEBUG == True:). And finally, it only serves the files if they're in STATIC_ROOT so you'd have to run collectstatic on your development machine all the time a change is made to static files.

Collectives™ on Stack Overflow

Django 2 Images from STATIC_URL is not loading in Css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related