Create Multiple Color Stops and Varying Transparency in Upper Layer of Background Image

[fevcap]

I would like to set the color stops over my background image using the upper layer in X Pro.
Here is the CSS:
#grad1 {
background-image: linear-gradient(33deg, rgba(241,161,86,.70) 7%, rgba(239,224,73,.8) 37%, rgba(255,255,255,.8) 67%, rgba(111,179,227,.5) 99%); /* Standard syntax (must be last) */
}
I cannot seem to implement it… please help!

[lely]

Hi @fevcap,

For example, you add the upper background color on section. On inline CSS under customize tab, you can add the custom CSS like this:

$el .x-bg-layer-upper-color{
   background-image: linear-gradient(33deg, rgba(241,161,86,.70) 7%, rgba(239,224,73,.8) 37%, rgba(255,255,255,.8) 67%, rgba(111,179,227,.5) 99%); /* Standard syntax (must be last) */
}
}

$el pertains to the section. The selector is looking for x-bg-layer-upper-color class inside the section. See this: https://screencast-o-matic.com/watch/cYfjiBa013

Hope this helps.

[fevcap]

@lely

.x-bg-layer-upper-color

Thanks so much for your help. The multiple color stops did work, but the transparency is not displaying. I cannot see through to the underlying image. In your demo, which was very helpful, can you show the upper layer over an underlying image?

[fevcap]

I got it to work, so never mind I changed the color picker from “white” to “transparent” and it did the trick. Thanks so much for the video step through… it made all the difference. Thanks!

[ruenel]

Hey @fevcap,

Don’t mention it. It’s good to know that @Lely were able to help out and that you have finally figured out to resolve your background gradient color issue.

Regards.