CSS: Perfecta imagen de fondo página completa
Hace un tiempito decidí cambiar el theme de mi web por uno más acorde a las fechas que se nos aproximan: Navidad y año nuevo. Empiezo a jugar con Photoshop y termino en una idea que me gustó bastante y era momento de empezar a recortar elementos y ubicarlos en HTML y CSS… hasta acá todo lindo. La duda existencial se me plantea cuando comienzo a trabajar con la imagen de fondo: ¿Podré utilizar una imagen de fondo que ocupe toda la pantalla sin dejarme espacios en blanco? Probando posicionamientos con varias imágenes en CSS y demás, concluyo en buscar por internet la solución y caigo con la magia de “background-size”
El uso es sencillo y derecho a lo que nos interesa:
[css]
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}[/css]
No hay mucho para explicar, éste código, así como lo ven, está preparado para trabajar en:
- Safari 3+
- Chrome
- IE 9+
- Opera 10+
- Firefox 3.6+
Y algunas de las ventajas:
- Llena la página con la imagen, sin espacios en blanco,
- Escala la imagen sin importar el monitor,
- Mantiene las proporciones de la imagen,
- La imagen se centra,
- No produce las barras de desplazamiento.
Una técnica ultra sencilla y de la mano de puro código CSS.
A mí me sirvió y es la técnica que actualmente utilizo en mi plantilla.