Django: how to use {{ something }} inside css file

Question

I have a model called Post with a FileField which is an image.

I want to do something like this:

.article-image{
    background-image: url("../img/{{ post.postimage }});
}

but obviously it does not work, so I tried to make inline css instead:

<div class="article-image" style="background-image:{% static 'img/{{ post.postimage }}' %}"></div>

but it does not work too.

How can I fix this

Omar Al-Howeiti · Accepted Answer · 2019-06-02 10:08:24Z

1

for the first case you can't do that because it's CSS file not Django template. but for the second case, you can use template tags like this

create templatetags/my_custom_tag.py in your app and add the following code into it.

from django import template
from your_base_app.settings import STATIC_URL

register = template.Library()

@register.simple_tag
def show_image(img):
    return STATIC_URL + 'img/' + img;

you should load your tags in the top of your django template like that

{% load my_custom_tag %}

your django template should be like this

<div class="article-image" style="background-image:url({% show_image post.postimage.url %})"></div>

edited Jun 2, 2019 at 10:08

answered Jun 2, 2019 at 8:40

Omar Al-Howeiti

1,3259 silver badges20 bronze badges

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

6 Comments

Omar Al-Howeiti Over a year ago

don't forget to import STATIC_URL from your settings

qux Over a year ago

my static url is /static/ so can I hard code it ? it never changes

Omar Al-Howeiti Over a year ago

what do you mean hard code it? do you mean like that style="background-image: /static/img/'{{ post.postimage }}' " ?

qux Over a year ago

what is templatetags ? is it a file or a directory and where do I create it

Omar Al-Howeiti Over a year ago

it's directory, you should create it inside your app

|

Collectives™ on Stack Overflow

Django: how to use {{ something }} inside css file

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related