Question

I’m just trying to put a background image on a webpage with 100% width so it scales to fit the viewport this works fine by having an image immediately after the body tag using the following styling:

img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

This works fine, the only issue being that I want the image to cut off at bottom if the height of the content is less than the height of the image in the same way a background image would. So if the page content is only 400px high then the background image should only be 400px (even if when scaled the full height should be more than this). I’m not sure how to do this using pure CSS (without javascript) so would be very grateful if someone could point me in the right direction?

Answer 1

Try putting a <div> around with the following CSS attributes:

overflow: hidden;
left: 0;
top: 0;
position: absolute;
z-index: -9999;