How to blur a background image?

Design help General
1

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?

image
image2940×1511 795 KB

If i blur now everything gets blurred:

image
image2950×1533 475 KB

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

2

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

1 Like
3

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

4

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

5

@tylerbeaty hi.
Managed to fix it now.

image
image2947×286 44.3 KB

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

6

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

Thanks,

2 Likes
7

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

8

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