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.