New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Background-image with gradient #243

Open

mortensassi opened this issue Jul 21, 2020 · 0 comments

mortensassi commented Jul 21, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment