Can someone please have a look at this page Peter Diem. I am working, or at least I try to work with a 100% height layout with a full screen background. I am using a floater to get the content vertically centered. But as you can see on the page do I have a vertical scrollbar! I really don’t see where I made the mistake.
Thank you in advance
Hi,
You set a min-height of 100% for the absolute image and a height of auto. That means when the browser is wide the height of the image will be in excess of the min-height and thus forces a scrollbar. The height of the image will be changed to maintain the aspect ratio caused by the width changes and therefore will often be greater than than the min-height:100%.
You would have needed to set a max-height of 100% instead of a min-height if you want the image to stay in the viewport and not cause a scrollbar. Of course that wil change the aspect ratio of the image.
Have you thought of just using a normal image on the body element and using something like background-size:cover ?