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
Sky020
March 10, 2020, 10:59am
2
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
Sky020
March 10, 2020, 12:20pm
4
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.