Blur Showing on Bottom Edge

I am using a Background Blur (2px) on the header image for a website I’m building. The Hero is a Container and the image is the Background.

Along the bottom edge, where the Hero Container meets the first content block Container, I see a thin line of the unfiltered background image/blur seeping out.

How do I keep the blur contained to its Container?

Hmmm, I’ve not seen that issue before :thinking:

Can you share the project via Elements Cloud and we’ll take a look for you :smiling_face:

Here’s the project file.

probably work with an image in the container, set to absolute. The container inset to twice your blur or adjust, not at Elements at the moment

@chet, easy fix, you just need to set the overflow to Hidden on the container :wink:

Here’s a video to explain why this is happening and how to fix it…

Do you not get an internal type shadow from doing that

If you can see the edges blurred (inside the container) you can also use the transform property to scale up the image slightly to avoid this. It’s kinda the same thing you’d do in a graphics program like Photoshop.

does transform not scale the container, not able to check at the moment, so might be wrong, anyway 2px not sure that would be noticed as a shadow like effect.

Not if you have overflow hidden on :slightly_smiling_face:

Here’s the full workflow…

@dan like to test you​:joy::joy::rofl::rofl:

No access to Elements, good to know, just scale image

same as my example scale image in absolute and use inset on the container

Check before I question