Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Una manera ligera y responsive de poner una imagen de fondo a pantalla completa en una web

Imago voragine.net
Enlace permanente

Pequeño snippet de CSS para conseguir una web con una imagen de fondo a pantalla completa. La solución funciona en todo tipo de dispositivos, escritorio y móviles.

html, body { overflow: hidden; height: 100%;}
body {margin: 0; padding: 0; background: #ffffff url("bg.png") repeat-x 50% 50% / contain;}

El último parámetro de background, / contain, es background-size y define cómo se comporta la imagen en diferentes proporciones de pantalla. Dos valores interesantes son contain y cover.

Dejar un comentario

No hay comentarios en esta entrada.
*
*

 

No hay trackbacks