How To Brand The Background Icon Of The Weblog Fill Upward The Entire Screen

A constant query is how to brand the background icon of the weblog ever fill upwards the entire hide regardless of the resolution of the monitor. And that is when nosotros set a background icon equally measured yesteryear our monitor forgetting that at that topographic point are genuinely monitors of all resolutions, real minor in addition to real large. So if nosotros set an icon according to our screen, at that topographic point volition endure somebody alongside a bigger monitor that sure enough volition non run into the whole pic or it volition endure repeated, in addition to inwards this case, using real minor monitors, the icon volition endure seen incomplete.

Here I volition speak virtually ii solutions for this, ane is using CSS3, in addition to closed to other is using jQuery. With either of these two, we'll brand the background icon of the page to fill upwards the entire hide regardless of the resolution of it.

CSS3

The starting fourth dimension pick is using CSS3, the payoff alongside this method is that nosotros create non overload the weblog alongside scripts, nosotros exercise entirely the background-size holding that is responsible for doing what nosotros want.
The disadvantage is that this holding is supported entirely yesteryear modern browsers, thus inwards the example of Internet Explorer, it volition entirely endure seen for version nine in addition to above, inwards other browsers at that topographic point shouldn't endure whatsoever problem.
The method is real simple, simply larn to Template - Edit HTML, locate the background that is within body { and supersede it alongside this:

background: url(Image URL) no-repeat middle centre fixed;
background-size: cover;

Note: to honour the body { tag, click anywhere within the code expanse in addition to thus press the CTRL + F keys in addition to glue it within the search box. If yous can't honour it, withdraw the infinite betwixt "body" in addition to "{" in addition to thus search again.

It would await something similar this:

trunk {
background: url(URL of the image) no-repeat middle centre fixed;
background-size: cover;
margin:0;
}

Just set the URL of the icon in addition to that's it.

jQuery

With this method nosotros volition exercise jQuery alongside BackStretch plugin, the payoff is that it plant inwards all browsers, including IE7 in addition to above. And if yous already exercise jQuery, yous don't bring to worry virtually the loading fourth dimension of your blog, because the plugin is genuinely small.

To exercise this method inwards your blog, larn to Template - Edit HTML in addition to earlier </head> glue this script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background icon to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed nether the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
$.backstretch("URL of the image");
</script>

Put the URL of the icon where indicated in addition to ready.

As yous tin run into both options are slowly to apply, each alongside its pros in addition to cons, but the result is the same, stretching the background icon to fit the hide of whatsoever monitor regardless of the resolution of it.

Remember that inwards the example of jQuery method, yous should verify that yous are non using Mootools or Scriptaculous, in addition to if yous already bring it, yous volition bring to implement closed to changes inwards the script to larn inwards compatible. And if yous already exercise jQuery remember having entirely ane version - the final one.