Created
October 27, 2010 10:50
-
-
Save itsjavi/648820 to your computer and use it in GitHub Desktop.
Script for filling the entire window with a background image at any resolution (auto-fit)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Auto-fit background image script</title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> | |
| <style> | |
| html,body{ | |
| padding:0; | |
| margin:0; | |
| height:100%; | |
| width:100%; | |
| } | |
| .full-window-bg{ | |
| position:fixed; | |
| display:block; | |
| top:0px; | |
| left:0px; | |
| width:100%; | |
| height:100%; | |
| padding:0; | |
| margin:0; | |
| text-align: center; | |
| z-index:0; | |
| } | |
| .full-window-bg img{ | |
| position:absolute; | |
| display:block; | |
| height:100%; | |
| padding:0; | |
| margin:0; | |
| } | |
| </style> | |
| <script> | |
| /* | |
| This function will make your background image fill the entire window while | |
| maintaining its aspect ratio. | |
| You can also center the image, because sometimes scaling makes your image to be cropped. | |
| When the image is centered vertically and horizontally, the cropped area is distributed within all image sides, instead of the bottom and right sides. | |
| */ | |
| function autofit_background_image(image_selector, center_image){ | |
| center_image = center_image || true; | |
| var af = {}; | |
| af.ww = $(window).width(); | |
| af.wh = $(window).height(); | |
| af.wr = af.wh/af.ww; //window ratio | |
| af.im = $(image_selector); | |
| af.iw = af.im.width(); | |
| af.ih = af.im.height(); | |
| af.ir = af.ih/af.iw; //image ratio | |
| if(center_image){ | |
| af.im_left = (af.ww/2) - (af.iw/2); | |
| af.im_top = (af.wh/2) - (af.ih/2); | |
| }else{ | |
| af.im_left = 0; | |
| af.im_top = 0; | |
| } | |
| if(af.ir < af.wr){ | |
| af.im.attr("style","width:auto; height:"+af.wh+"px; top:"+af.im_top+"px; left:"+af.im_left+"px;"); | |
| }else{ | |
| af.im.attr("style","height:auto; width:"+af.ww+"px; top:"+af.im_top+"px; left:"+af.im_left+"px;"); | |
| } | |
| } | |
| function do_autofit(){ | |
| autofit_background_image(".full-window-bg img"); | |
| //Sometimes the DOM needs some time to detect new sizes | |
| setTimeout(function(){ | |
| autofit_background_image(".full-window-bg img"); | |
| }, 500); | |
| } | |
| $(window).resize(function(){ | |
| do_autofit(); | |
| }); | |
| $(document).ready(function(){ | |
| do_autofit(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="full-window-bg"><img src="img/bg.png" alt="" /></div> | |
| <h1>Auto-fit background image</h1> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment