Streaming live at 10am (PST)

How to blur a background image?

Hello!

I have a content inside a section, thats inside a div block. This div block (parent element) has a BG image which I want to blur. To make the content itself stick more out.

However if I try to blur it now everything gets blurred, even the content, as the content itself is in the div block that im blurring…

Question is: how can I blur only the BG image?

If i blur now everything gets blurred:

Only want the BG image, but unsure how to apply blur effect on only the BG image.

Hey @rdngon Can you post a read only link so we can test your problem?

1 Like

Hey, thanks! Sent you a read only link now. Go to the blog page… That is the BG image i want to be blurred.

I think i just need to be able to disale inheritance from the top.
Or if its another way to blur a BG image. Probs easy but i just cant figure it out:p

@tylerbeaty hi.
Managed to fix it now.

Only issue left is that the top and bottom dividers are blurry as well. Would like them to be sharp. Tip?

Hi there, did you find a solution for this as I’m trying to do the same.

Thanks,

2 Likes

well, what’s the solution?
I’m struggling with the same thing.

SOLUTION:

  1. Make sure you have a background image set to a div/container
  2. In the styles menu on the right open up Effects and click the + icon.
  3. Modify how much blur you want and boom!!..you’re good to go!.
1 Like