18 noviembre 2015

BLOGGER: CÓMO HACER QUE LA IMAGEN DE FONDO DE UN 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.


Para solucionar esto usaremos 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.