C?mo hacer que la imagen de fondo del blog cubra toda la pantalla

Una constante pregunta es c?mo hacer para que la imagen de fondo del blog siempre ocupe toda la pantalla sin importar la resoluci?n del monitor. Y es que a veces ponemos una imagen de fondo seg?n las medidas de nuestro monitor, y no consideramos que en la actualidad los monitores los hay de todas las resoluciones, muy peque?os y muy grandes. As? que si ponemos una imagen de acuerdo a nuestra pantalla habr? alguien con un monitor mayor que seguramente no ver? toda la imagen o la ver? repetida, y en el caso de los que usan monitores muy peque?os ver?n la imagen incompleta.

Aqu? veremos dos soluciones a ello, una usando CSS3, y otra con jQuery. Con cualquiera de las dos haremos que la imagen de fondo de la p?gina ocupe toda la pantalla del monitor sin importar la resoluci?n del mismo.

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;
}

S?lo pon la URL de la imagen y listo.

jQuery

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.

Recuerda que en el caso del m�todo con jQuery, deber?s verificar que no uses Scriptaculous o Mootools, de ser as? tendr?s que aplicar unos cambios en el script para hacerlos compatibles.
Y si ya usas jQuery recuerda tener s?lo una versi?n, la ?ltima.