Hacer Que Background Cubra Pantalla Monitor Blogger

En este articulo te mostrare un truco sencillo para que una imagen de fondo cubra la pantalla entera del monitor ,no importando cuan grande o pequeña sea la pantalla de el mismo.Para lograr este truco te traigo dos formas de hacerlo,una es utilizando el codigo de Css3 y la segunda forma de hacerlo es utilizando un script de JQuery.

Veamos si deseas utilizar CSS3 que es en si el mas liviano pues solo cambiamos unos atributos de diseño en tu plantilla de blogger.Pero esta forma se aplica mayormente a los navegadores mas actualizados,si deseas estos son los pasos a seguir.
1.Entra en tu cuenta de blogger
2.Ve a Plantilla>Editar Html y busca la palabra Background que se encuentra dentro de etiqueta Body{ y reemplazalo por el siguiente codigo:

background: url(URL de la imagen) no-repeat center center fixed; background-size: cover;

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

3.Para finalizar este  Sólo pon la URL de la imagen de tu imagen preferida,y terminado.

Vamos ahora a ver como se hace utilizando JQuery

Cuando utilizas este metodo tienes la ventaja que funciona muy bien con la mayoria de los navegadores habidos y por haber,para insertarlo en tu blog de blogger solo sigue estos sencillos pasos:

1.Entra en tu cuenta de blogger
2.Ve a Plantilla>Editar Html y busca la siguiente etiqueta </head>
3.Copia y pega el codigo de abajo antes de etiqueta </head>

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

4.Para finalizar cambia URL de la imagen con la URL de tu imagen de fondo favorita.

Nota: Importante que cuando usas el método con jQuery, verifica 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 o mas reciente.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati