Hi I am trying to create a clone of a website, but for some reason a image is hiding behind the header? Is there anyway to fix this? Here is what the website looks like without CSS. And here is what is looks like with CSS. The image with the girl is no longer showing. Please and thanks! Link to code: https://www.codecademy.com/workspaces/62f8f89f551a7175e9f4e4f2
If I understood your problem correctly, it seems to me you have set
position: absolute to your
.background-theme-blue, which is applied to the section blocking part of the content.
You can probably just get rid of the position attribute entirely, as I can’t see a reason to use it here. As a general guidance to positioning HTML elements, I’d advice absolute positioning where it isn’t absolutely necessary (pun not intended) - especially if you’re a beginner in HTML/CSS. And when you actually need to use
position: absolute, try to wrap the absolute-positioned element under a div/section with
position: relative. This way your absolute-positioned element will be constrained within that wrapper element, and will not overlap with other content.
I hope this helped.
Thank you very much! I understand my error now. When I removed absolute the background-color wouldn’t go the full width of the page so I had to reset margins for everything!