This morning, we set about finding a way to stretch a site background image with the following requirements:<\/p>\n
The following snippets illustrate our solution:<\/p>\n
\t<\/code><\/p>\n <\/p>\n \n\tIf you have a higher res background image, you may notice some "jumpiness" when the page first loads, as the image is resized in front of the viewer's eyes.<\/p>\n To avoid this, we can hide the image until the resizing is complete.<\/p>\n Add the following CSS:<\/p>\n And, the following jQuery to the end of your resizeBG function:<\/p>\n This morning, we set about finding a way to stretch a site background image with the following requirements: The background must fill the height and…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[5],"tags":[56,55,54],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/122"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":4,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/122\/revisions\/126"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}...
\n\t<body>
\n\t <div id="page-background">
\n\t <img src="\/src\/img\/bg.jpg" width="100%" height="100%" alt="" \/>
\n\t <\/div>
\n\t <div id="document">
\n\t...
\n\t<\/code><\/p>\nThe CSS<\/h3>\n
html,body { height: 100%; margin: 0; padding: 0; }
\n\t#page-background { position: fixed; bottom: 0;
\n\t left: 0; width: 100%; height: 100%; }
\n\t#document { position: relative; z-index: 1; }<\/p>\nThe JavaScript \/ jQuery<\/h3>\n
resizeBG = function() {
\n\t var image = $('#page-background img');
\n\t image.removeAttr("width");
\n\t image.removeAttr("height");
\n\t var imageWidth = image.attr('width') || image.width();
\n\t var imageHeight = image.attr('height') || image.height();
\n\t var ratio = imageHeight \/ imageWidth;
\n\t
\n\t var h = $(window).height();
\n\t var w = $(window).width();
\n\t
\n\t $('#page-background img, #page-background').css('width', w);
\n\t $('#page-background img, #page-background').css('height', w * ratio);
\n\t}<\/code><\/p>\n$(window).load( resizeBG );
\n\t$(window).resize( resizeBG );
\n\t<\/code><\/p>\n#page-background { visibility: hidden; }
\n\t<\/code><\/p>\n$('#page-background').css('visibility', 'visible');
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"