I am trying to recreate what is made at the 0:50 mark of this tutorial https://university.webflow.com/article/image-field . 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”:
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
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 
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
