Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling:
img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
While this approach works well, my only concern is ensuring that the image cuts off at the bottom if the content's height is shorter than the image itself, in a manner reminiscent of a traditional background image. For instance, if the page content extends only up to 400px in height, then the background image should also cap at 400px (even if its full scaled height exceeds this). I am currently seeking guidance on how to achieve this effect using pure CSS, without resorting to JavaScript. Any assistance or insights on the right direction would be greatly appreciated.