Streaming live at 10am (PST)

Adding a gradient to CMS image?

I am trying to recreate what is made at the 0:50 mark of this tutorial . I am wondering how the furthest back background has a blur and a dark solid color (to darken it) since when you “Get BG image from Blog Posts” it also “overrides all background gradients.”

Here is my site Read-Only: LINK

Hi Kameron,

Here are a few steps to help you achieving the blur effect with a gradient on the hero section:

1 - Remove the BG image from Section 2 and change the section position to “Relative”:

step 1

2 - Inside Section 2 create a new Div block and add a class (e.g.: “bg image”). Set this new block to position: absolute

3 - Still on the “bg image” div, add a blur filter to your image:


4 - Create a new Div Block under Section 2, add a class (e.g.: “gradient overlay”) and also set the position: absolute

step 3

5 - You can now add your gradient or color to this new div block:


Hope this help you achieving the effect that you are looking for :wink:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.