If your design required to put an image as a full page background, you should consider few things, if the image height is defined in percentages it will be more adjustable within different browsers and with the re-size of browser window, and also alignment of the background image is also important centered aligned image will make it present better. Today we are going to show you how to make an image that spread over browsers window as a background all the time that fills the entire page with no white spaces and scrollbars.
Normal css to make image as full background image
html { background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
css to make inline image as full background image
Here we use an inline element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.
#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; } <div id="bg"> <img src="images/bg.jpg" alt=""> </div>
jQuery method to to make inline image as full background image
<html> <head> <style> #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } </style> <script> $(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); </script> </head> <body> <img src="images/bg.jpg" id="bg" alt=""> </body> </html>
Thanks for any other magnificent post. Where else may just anyone get that kind of info in such a perfect method of writing? I’ve a presentation next week, and I’m at the search for such info.