[FIXED] How to write django code inside css style tag to link images from static directory

Issue

I want to write Django code into CSS style tag in HTML elements in order to get images from static directory. here is my original code

<a href="single.html" class="img" style="background-image: url(images/image_1.jpg);"></a>

i tried with the below code

<a href="single.html" class="img" style="background-image: {% static 'images/image_1.jpg' %};"></a>

but this isn't worked for me, how can i solve this problem? NB: i used {% load static %} to load all static files, css and js works fine but i became failed to do this.

Solution

First Add These Code In Your settings.py

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'myproject/static')
]


# Media settings
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Then Add These Code In Your project urls.py

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Then add this line to your html

style="background-image: url({%static 'images/person_1.jpg' %});"

Answered By - Mahmudul Hassan