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.

facebook Background Responsive con CSStwitter Background Responsive con CSSgoogle Background Responsive con CSSdiggit Background Responsive con CSSpinterest Background Responsive con CSSlinkedin Background Responsive con CSSprint Background Responsive con CSSemail Background Responsive con CSSSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

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