0

Make Div Full Height Of Device Display Size

By 1st April 2015Blog

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!

Phil

Phil

I'm a Wordpress web developer and website designer based in Cheshire, UK. I specialise in Wordpress, Responsive design and website conversion. | Twitter | Linkedin

Leave a Reply