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;Se vería más o menos así:
background-size: cover;
body {Sólo pon la URL de la imagen y listo.
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;
}
