Background-image with gradient

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
```html
style="background-image:
url('{{ tease.thumbnail.src('placeholder') }}'),
linear-gradient(135deg, var(--color-secondary-75) 0%, var(--color-primary-75) 55%)">
```

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

```html
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:
```css
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