Background blur on page scroll causes white edges

Hi @Kasimir_Kuusela!

You could add a Color field to your Collection and use that field to select a color that works well behind each image. For example, choose a darker black/green for the fox image.

After you’ve added that field and selected a color, you can add a div inside of the hero section that’s absolutely positioned in the top left with a width and height of 100%. Then, use the Get BG Color from... option to pull the color you selected from the Collection.

image

Another option would be to put a duplicate of the photo behind the one that will blur. If your images are optimized, you should only take a slight hint on performance going that route.

I hope that helps. Let me know if I can help any further!

1 Like