CSS3
La primera opción es usando CSS3, la ventaja con este método es que no sobrecargamos el blog con scripts, usaremos únicamente la propiedad background-size que se encargará de realizar lo que queremos.
La desventaja es que esta propiedad sólo es soportada por los navegadores modernos, así que en el caso de Internet Explorer sólo se verá de la versión 9 en adelante, en los demás navegadores no deberá haber problema.
El método es muy simple, sólo tenemos que ingresar a la Edición HTML de la plantilla, localizar el background que está dentro de body { y reemplazarlo por esto:
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
Se vería más o menos así:
body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
jQuery (Es el que yo uso :P)
Con este método usaremos jQuery con el plugin BackStretch, la ventaja es que funciona en todos los navegadores, incluyendo IE7 en adelante. La desventaja no es mayor si ya usas jQuery, ya que el plugin en realidad es pequeño. Para usar este método en tu blog entra en la Edición HTML y antes de </head> pega este script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.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 image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under 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 de la imagen");
</script>
Pon la URL de la imagen donde se indica y listo.
Con este método la carga de la imagen del fondo se hace hasta el final, esto es para que el usuario no tenga que estar esperando a que cargue la imagen para que empiece cargar el blog, así que si en el body { ya utilizas una imagen de fondo se verá primero e instantes después se cargará la del script, por lo que si lo deseas puedes eliminar la imagen que tengas en el body y así dejar que sólo cargue la imagen del script.
Como puedes ver ambos sistemas son fáciles de aplicar, cada uno con sus pros y contras, pero el resultado es el mismo, extender la imagen de fondo para que se ajuste a la pantalla de cualquier monitor sin importar la resolución del mismo.
Fuente | CiudadBlogger