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.
