/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.4.4"); google.setOnLoadCallback(function() { jQuery('#pageBackground').fadeIn('1500'); jQuery('section').delay('900').fadeIn('1500'); }); </script> <script type="text/javascript"> //resize background script from example at http://css-tricks.com/perfect-full-page-background-image/ $(function() { var theWindow = $(window), $bg = $("#pageBackground"), 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>