Try using background image with css variable in Twig template

Question

So I have a question. I want to use a background image with a css variable and in my project I am using Twig to loop through the articles that are selected from my database via a sql request. Each article has a relative link to the image in the database so it can be seen on the website.

The problem is, I want to use the same image link from the database as the article background.

I tried using a css variable like this:

div.liste {
        position: relative;
        display: flex;
        background-image: var(--image);
        animation: liste_appear .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) backwards;
        /*rest doesn't matter*/
}

Then, in the template, it looks like this

{% for produit in produit %}
{% set compteur = compteur 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: {{ produit.image }}">
    <img src="{{ produit.image }}">
</div>
{% endfor %}

As you can see, I'm using another Twig variable that goes up every time it loops, and it works with the css (the animation is delayed by 50ms multiplied by the number the variable "compteur" is in), but I don't know why it doesn't do this has nothing to do with the image variable...

Also, {{ produit.image }} works fine as it displays the image correctly.

If anyone has an answer, we'd be happy to fix it and thank that person!

Answer 1

As Darkbee said in the comments , just follow his twig fiddle to update your styles. Didn't realize you had inline scope for css variables.