Make Div Full Height Of Device Display Size

Previously, I wrote a short post with a snippet to allow full-size CSS backgrounds. This is great and I use it all the time, but this method will stretch the image background to the max width, thus height is in proportion to the width. What this means, is that landscape images will perfectly fit the width of the div, but the height may be too short and get cut off.

So, to keep the height as the dimension which maxes the device height, and width being the dynamic, here’s how to do just that, using simply CSS:

mydiv {
background: url(images/mybg.jpg) no-repeat;
position: fixed !important;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

 

This will keep the background height at 100% full height, fix the background image and keep the image in full proportion while doing so.

Hope this helps!

Useful post? Share it

Leave a Reply

Your email address will not be published. Required fields are marked *