How To Brand The Background Icon Of The Spider Web Log Fill Upward The Entire Screen
Saturday, March 28, 2020
Edit
A constant enquiry is how to brand the background icon of the weblog ever fill upwards the entire covert regardless of the resolution of the monitor. And that is when nosotros seat a background icon equally measured past times our monitor forgetting that in that place are truly monitors of all resolutions, really small-scale in addition to really large. So if nosotros seat an icon according to our screen, in that place volition last individual alongside a bigger monitor that certainly volition non meet the whole pic or it volition last repeated, in addition to inward this case, using really small-scale monitors, the icon volition last seen incomplete.
Here I volition utter nigh ii solutions for this, 1 is using CSS3, in addition to approximately other is using jQuery. With either of these two, we'll brand the background icon of the page to fill upwards the entire covert regardless of the resolution of it.
The outset selection is using CSS3, the wages alongside this method is that nosotros produce non overload the weblog alongside scripts, nosotros utilisation alone the background-size belongings that is responsible for doing what nosotros want.
The disadvantage is that this belongings is supported alone past times modern browsers, hence inward the illustration of Internet Explorer, it volition alone last seen for version nine in addition to above, inward other browsers in that place shouldn't last whatever problem.
The method is really simple, simply become to Template - Edit HTML, locate the background that is within body { and supervene upon it alongside this:
It would hold off something similar this:
With this method nosotros volition utilisation jQuery alongside BackStretch plugin, the wages is that it industrial plant inward all browsers, including IE7 in addition to above. And if y'all already utilisation jQuery, y'all don't accept to worry nigh the loading fourth dimension of your blog, because the plugin is truly small.
To utilisation this method inward your blog, become to Template - Edit HTML in addition to earlier </head> glue this script:
Put the URL of the icon where indicated in addition to ready.
As y'all tin meet both options are slow to apply, each alongside its pros in addition to cons, but the final result is the same, stretching the background icon to fit the covert of whatever monitor regardless of the resolution of it.
Remember that inward the illustration of jQuery method, y'all should verify that y'all are non using Mootools or Scriptaculous, in addition to if y'all already accept it, y'all volition accept to implement approximately changes inward the script to become far compatible. And if y'all already utilisation jQuery remember having alone 1 version - the terminal one.
Here I volition utter nigh ii solutions for this, 1 is using CSS3, in addition to approximately other is using jQuery. With either of these two, we'll brand the background icon of the page to fill upwards the entire covert regardless of the resolution of it.
CSS3
The outset selection is using CSS3, the wages alongside this method is that nosotros produce non overload the weblog alongside scripts, nosotros utilisation alone the background-size belongings that is responsible for doing what nosotros want.
The disadvantage is that this belongings is supported alone past times modern browsers, hence inward the illustration of Internet Explorer, it volition alone last seen for version nine in addition to above, inward other browsers in that place shouldn't last whatever problem.
The method is really simple, simply become to Template - Edit HTML, locate the background that is within body { and supervene upon it alongside this:
background: url(Image URL) no-repeat middle centre fixed;Note: to abide by the body { tag, click anywhere within the code expanse hence press the CTRL + F keys in addition to glue it within the search box. If y'all can't abide by it, take away the infinite betwixt "body" in addition to "{" hence search again.
background-size: cover;
It would hold off something similar this:
torso {Just seat the URL of the icon in addition to that's it.
background: url(URL of the image) no-repeat middle centre fixed;
background-size: cover;
margin:0;
}
jQuery
With this method nosotros volition utilisation jQuery alongside BackStretch plugin, the wages is that it industrial plant inward all browsers, including IE7 in addition to above. And if y'all already utilisation jQuery, y'all don't accept to worry nigh the loading fourth dimension of your blog, because the plugin is truly small.
To utilisation this method inward your blog, become 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 y'all tin meet both options are slow to apply, each alongside its pros in addition to cons, but the final result is the same, stretching the background icon to fit the covert of whatever monitor regardless of the resolution of it.
Remember that inward the illustration of jQuery method, y'all should verify that y'all are non using Mootools or Scriptaculous, in addition to if y'all already accept it, y'all volition accept to implement approximately changes inward the script to become far compatible. And if y'all already utilisation jQuery remember having alone 1 version - the terminal one.