Change CSS variable background image on Polymer app-header

Question

I want to update the background image dynamically using CSS variables.

app-header {
    background-color: var(--paper-red-500);
    --app-header-background-front-layer: {
      background-image: url(var(--profile-cover));
    };
  }

But it won't update using this approach:

this.customStyle['--profile-cover'] = url;
this.updateStyles();

The app-header element is made from Polymer :) Any answers?

Answer 1

I got it,

this.customStyle['--profile-cover'] = 'url(\'' + url + '\')'

So basically I have to change the CSS:

background-image: var(--profile-cover);