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

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.