Background Responsive con CSS

Actualizado el domingo, 19 junio, 2016

Gracias a la introducción de las Media Queries en las hojas de estilos CSS,es posible la creación de páginas responsive web design. Las media queries son a fin de cuentas una serie de órdenes que se incluimos en las hojas css que indican a las páginas HTML cómo deben comportarse dependiendo de la resolución de pantalla. Para entendernos mejor, lo que hacen es adaptar una pagina web a la pantalla del dispositivo desde el cual se visualiza en ese momento.

Vemos varias formas de definir el tamaño de la imagen de fondo.
Redimensión de background absoluto:

background-size:width height;

Le decimos que la anchura y la altura se coloquen auto, conservando las dimensiones de la imagen original.
Redimensión de background al tamaño máximo:
En background-size es posible utilizar la palabra reservada contain, lo que hace es que la imagen se adapte al tamaño del contenedor.

background-size: contain;

La imagen de fondo aumenta o disminuye en proporción, pero la anchura y la altura no será superior a las dimensiones establecidas en el contenedor.
Ocupar todo el background:
El background-size también acepta la palabra reservada cover.

background-size: cover;

La imagen del background se ampliará hasta ajustarse en el contenedor, la imagen no debe exceder de las dimensiones del contenedor, si excede es posible que aparezca cortada y pixelada.

Agregar comentario