Just after the body tag, enter this <div id="background-image-container"> <img src="{{bg_image.image.

ge.url}}" id="background-image" /> </div> ---#background-image-container { position: fixed; left: 0; top: 0; overflow: hidden; z-index: -9999; display: none; } #background-image { position: fixed; } ---Then this at the end of the page (before closing body tag) <script type="text/javascript"> $(document).ready(function() { $('#background-image').imagesLoaded( function() { resize_bg('{{request.path}}', 0); resize_bg('{{request.path}}', 1); }); //resize_bg('{{request.path}}', 1); $(window).resize(function() { resize_bg('{{request.path}}', 1); }); }); </script> ---function resize_bg(path, is_resize) { $("#background-image").css("left","0"); var footer_header_offset = 32 + 53; var doc_width = $(window).width(); var doc_height = $(window).height(); var image_width = $("#background-image").width(); var image_height = $("#background-image").height(); var image_ratio = image_width/image_height; var doc_ratio = doc_width/doc_height; if (doc_ratio > image_ratio) { var new_width = doc_width; var new_height = Math.round(new_width/image_ratio); $("#background-image").css({'width': 'auto', 'height': new_height+'px'}); } else { var new_height = doc_height; var new_width = Math.round(new_height*image_ratio); $("#background-image").css({'height': 'auto', 'width': new_width+'px'}); }

if } if } // if }

(new_width>doc_width) { var width_offset = Math.round((new_width-doc_width)/2); $("#background-image").css("left","-"+width_offset+"px"); (new_height>doc_height) { var height_offset = Math.round((new_height-doc_height)/2); $("#background-image").css("top","-"+height_offset+"px"); Now we can reveal the background (is_resize==0) { $("#background-image-container").show();