Streaming live at 10am (PST)

Use background image from CMS but preserve gradient?


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?


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:


Unable to apply background gradient or color layers to CMS-bound backgrounds

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.


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

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

Thank you,



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.

closed #6

closed #7