Fondo de pantalla Responsive para Dispositivos móviles

Este tip es para las páginas que usan la vista «Ordenador» para los dispositivos móviles.

El fondo de pantalla que dejamos en Blogger cuando se visualiza en un dispositivo móvil se repite en forma de mosaico, y si no está configurado así se visualizará una imagen muy pequeña que solo ocupa una parte de la pantalla.

Para corregir esto solo debemos agregar una instrucción CSS a la plantilla arriba del:

]]>
</b:template-skin>

La instrucción CSS es la siguiente:
------------------------------

body{
background: url(imagen.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

------------------------------

Solo debes tener en cuenta el formato de imagen que subiste a Blogger como fondo de la página, si es .png deja la instrucción CSS como está, si es .jpg cambia .png por .jpg, si es .gif cambia.png por .gif.

Esto desactivará la opción de dejar la imagen como mosaico en la parte de Tema / Personalizar Fondo / Subir imagen y hará que los navegadores aumenten el tamaño de la imagen hasta que ocupe todo el fondo de la pantalla.

Ahora tu página o blog mostrará la imagen de fondo ocupando toda la pantalla en los dispositivos móviles.

Espero que esta información te sea muy útil.

Gracias.

Tal vez también te interese:

Cómo adaptar tu blog para diferentes resoluciones de pantalla


Cómo hago para que en blogger se muestre el fondo de pantalla ocupando toda la pantalla en los celulares, mostrar grande el fondo de pantalla en blogger, que el fondo de pantalla ocupe toda la pantalla en blogger, que el blog se vea en el celular igual que en la pc, mismo fondo de pantalla de la pc en blogger para el celular, que no se vea en mosaico el fondo de mi blog, cómo hago para que el fondo de pantalla en blogger sea el mismo de la pc en el celular,