Background-image with gradient

[mortensassi]

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

I have an background image with linear gradient which uses the css-filter to mulitply

style="background-image:
      url('{{ tease.thumbnail.src('placeholder') }}'),
      linear-gradient(135deg, var(--color-secondary-75) 0%, var(--color-primary-75) 55%)"></div>

when you prepare the original image with the gradient parameters like this:

data-background-image="{{ tease.thumbnail }}, linear-gradient(135deg, var(--color-secondary-75) 0%, var(--color-primary-75) 55%)"

vvv

Current Behavior

it actually gets processed like this:

background-image: url("//localhost:3000/app/uploads/2020/07/martin-sanchez-j2c7yf223Mk-unsplash-original-scaled.jpg"), url(" linear-gradient(135deg"), url(" var(--color-secondary-75) 0%"), url(" var(--color-primary-75) 55%)")

Context

Trying to use an image in combination with an linear gradient overlay

Tested on:

• Browser Name and version: Chromium Version 83.0.4103.116 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10 2004