Background Responsive con CSS

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:

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.

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.

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.

Background Responsive con CSS
VOTA EL ARTICULO POR FAVOR

Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on LinkedInPrint this pageEmail this to someone VOTA Y COMPARTE

Agregar comentario

13 + 1 =

Suscribete

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.

Tu suscripción a sido realizada con éxito.