Background Image Html Fit To Screen. We can do this purely through css thanks to the background size property now in css3. Use a container element and add a background image to the container with height.
Use 50 to create a half page background image. Contain to scale the image while preserving its intrinsic aspect ratio if any to the largest size such that both its width and its height can fit inside the background positioning area. 100 to both html and body.
We set a fixed and centered background image on it then adjust it s size using background size set to the cover keyword.
Awesome easy progressive css3 way. We ll use the html element better than body as it s always at least the height of the browser window. Try resizing the browser window and you will see that the image will stretch but always cover the entire element. Css background image size to fit full screen how to create example we can use html element better than body.