Use of Django's static templatetag in css file to set a background image

Overview

Setting an image as a background property in CSS can be a problem in Django as it recommends to refer to your static files with the static template tag, but then you realize load_static doesn’t work from CSS files.

So how do you do something like background-image: url({% static 'images/cover.jpg' %}); in CSS?

Here are two approaches to solve this issue.

Concept

There is a special setting that handles how static files are served: STATIC_URL.

The static (django.templatetags.dostatic) templatetag, joins the given path with the above mentioned STATIC_URL setting.

In most cases the STATIC_URL settings is /static/, so you can use /static/images/bg.jpg in your CSS as long as this setting doesn’t change.

Having that in mind you can use it, and if not you can choose to apply that style in the HTML directly using {% static 'images/bg.jpg' %}, that way you are sure it will always use the correct setting and be accessible.

Solution 1: Background in HTML

One of the approaches is to set the above property as an inline style in the HTML attributes:

<div style="background-image: url({% static 'images/cover.jpg' %});">
<!-- image -->
</div>

Solution 2: Static path

In CSS, for example myapp/css/static.css:

cover {
	background: url('/static/img/home-cover.jpg');
}

In HTML:

<div class="cover">
<!-- image -->
</div>

References

• https://docs.djangoproject.com/en/2.1/howto/static-files/
• https://docs.djangoproject.com/en/2.0/ref/settings/