How to use Flask url_for in a CSS file?

Question

I'm using Flask with HTML and CSS. When this is possible:

<img src="{{ url_for('static', filename='images/planets.jpeg' ) }}">

What do I have to write here to address the same image?

.bgimg-1 { background-image: url('https://i.ytimg.com/vi/J9QOB6hSI-c/maxresdefault.jpg'); }

The solution should look similar to this:

.bgimg-1 { background-image: url('{{ url_for('static', filename='images/planets.jpeg' ) }}'); }

Thank you.

Answer 1

You can't use Jinja directly in the CSS file since you normally don't render it as a template, but there is 3 alternate way to achieve your need:

Method 1

Use correct relative path in your CSS file:

background: url("/static/images/bg.jpg") no-repeat 0px 0px;

Method 2

Put your background line into the template:

<style>
    background: url("{{ url_for('static',filename='images/bg.jpg') }}") no-repeat 0px 0px;
</style>

Method 3

Define a CSS variable in your template:

<style>
    :root {
        --background-url: {{ url_for('static', filename='images/bg.jpg') }}
    }
</style>

Then use it in your CSS file:

background: url("var(--background-url)") no-repeat 0px 0px;