(FCC Product Landing Page) Creating a blurred background image

Hey all,

I finished my product landing page requirements, and now a spending time making it look nicer.

I wanted to add a blurred background image for the page (not in the nav).

I tried using the w3school guide on blurred images.

When used on a new pen, it works fine. When pasted into my ‘Product Landing Page’, it doesn’t work. Something must be preventing it from showing up.

In fact, for some reason I can’t manipulate the div even when using a simple header! Going a little crazy here. Still new to this.

Many thanks for your help.

Link to the codepen: https://codepen.io/DebWeseigner/pen/poJpybr

Hello Deb.

There are some issues with your code in CodePen. You can use the HTML and CSS Analyser to find some of them. I would suggest building your page on your local machine, if you can, as this would be much easier to find errors.

Start with that.

Hello! I found the issue. One of the brackets wasn’t closed in the @media section.

I now have my blurred background image, but am unsure how to get it to fit under the other elements without blurring them.

Updated codepen: https://codepen.io/DebWeseigner/pen/poJpybr

Many thanks

I am not sure what you mean. The image is under your elements, and it not blurring them.

I would change the background image’s position to fixed. This helps it cover your screen, even when you scroll.

Position: fixed solved it.

Thanks so much, you’ve been a great help.