Use background image from CMS but preserve gradient?

Design help CMS
1

I am able to grab images from a collection and use them as a background image for a link block, div etc. However, if that element has a gradient overlay I can’t preserve that gradient when I pull in the image form a collection. Am I missing something?

2

If you add another div with absolute positioning at 100% width & height inside of that hero image block then you can get the gradient to work. It doesn’t work when applied to dynamic content yet. :wink:

Let me know if you have any questions please :smile:

Waldo

2 Likes
3

Thanks @Waldo. That is the conclusion I came to… just didn’t want to go through the work until I knew for sure that it wasn’t supported. Thanks for the reply. Much appreciated! I will let you know if I run into any issues.

1 Like
4

My pleasure to help :slight_smile: please let me know if you have any other questions :smile:

I’ll make sure to let the team know. :smile:

Thank you,

Waldo

1 Like
5

Yeah the problem is that making the background dynamic will overwrite the entire background-image property which includes any backgrounds added (images and gradients). As @Waldo mentioned the only way to preserve the gradient is for it to be a separate absolute positioned element.

5 Likes