Hogar › Tarifas › Tamaño de imagen de fondo html. Los fondos CSS3 salvan el día. Una solución maravillosa, simple y progresiva usando CSS3

Tamaño de imagen de fondo html. Los fondos CSS3 salvan el día. Una solución maravillosa, simple y progresiva usando CSS3

Las tecnologías web, al igual que diversas tendencias de diseño, no se detienen, por lo que cada vez aparecen algunas características y matices originales para los sitios web. Una de estas "direcciones" es el uso de un fondo (backgorund), que se extiende por toda la pantalla en ancho y alto. Algo así como hace un año o más, dije: la imagen se colocó en el encabezado del blog y se “transicionó” suavemente al encabezado principal. color de fondo páginas web. Si lo deseas, incluso puedes agregar.

Colocar una imagen grande escalable como fondo es algo nuevo y más complejo, cuya solución encontré en este artículo.

Objetivo esta lección coloque una imagen de fondo en el sitio que cubra constantemente todo el fondo de la ventana del navegador. Qué hay que hacer exactamente:

llenar toda la página con una imagen sin espacios;
cambiar el tamaño de la imagen si es necesario (reduciendo la ventana del navegador);
mantener las proporciones de la imagen;
posicionar la imagen en el centro de la página;
falta de barras de desplazamiento en la página;
solución para varios navegadores adecuada para diferentes navegadores;
implementación sin tecnologías de terceros como flash.

Entonces, hay varios soluciones adecuadas para el fondo del sitio en pantalla completa.

Una solución maravillosa, simple y progresiva usando CSS3

Para realizar esta tarea, podemos usar la propiedad tamaño de fondo en CSS3. Usaremos un elemento html que es mejor que el cuerpo. Configuremos el fondo para que sea fijo y centrado, y luego usemos el valor de cobertura en el tamaño del fondo.

html (fondo: url (images/bg.jpg) centro sin repetición fijo; -webkit-fondo-tamaño: portada; -moz-fondo-tamaño: portada; -o-fondo-tamaño: portada; tamaño de fondo: cubrir)

html (fondo: url(images/bg.jpg) centro sin repetición centro fijo; -webkit-fondo-tamaño: portada; -moz-fondo-tamaño: portada; -o-fondo-tamaño: portada; fondo-tamaño: cubrir)

La solución es compatible con casi todas las populares en la red:

Firefox 3.6+ (Firefox 4 admite versiones con prefijo que no son del proveedor)
Opera 10+ (Opera 9.5 admite el tamaño de fondo pero sin el valor de portada)
Chrome lo que sea+
Es decir 9+
Safari 3+

Un tal Goltzman encontró una solución que permite que el hack funcione en IE

filtro: progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg", sizingMethod= "scale"); -filtro-ms:;

"progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"

filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); Pero atención!!! Esto puede causar algunos problemas con los enlaces de la página. Por cierto, un poco más tarde Matt Litherland agregó que el código, en principio, se puede usar pero no para esto. elementos html

o cuerpo, pero necesitas implementar todo a través de un div con 100% de alto y ancho.CSS

-truco número 1 Doug Neiner presenta una versión alternativa. En este caso se utiliza un elemento incrustado en la página.

, cuyo tamaño se puede cambiar en cualquier navegador. Establecemos el valor de altura mínima, que llena la ventana del navegador verticalmente, y configuramos el ancho al 100%, que llena la página horizontalmente. También configuramos el ancho mínimo para que la imagen nunca sea más pequeña de lo que realmente es. img.bg (/* Establecer reglas para rellenar el fondo */ altura mínima: 100%; ancho mínimo: 1024px; /* Configurar escala proporcional */ ancho: 100%;

altura: automático;

/* Configurar posicionamiento */ posición: fija; arriba: 0; izquierda: 0;

) @media pantalla y (ancho máximo: 1024px) (
/* Específico de esta imagen en particular */
img.bg (izquierda: 50%; margen izquierdo: -512px; /* 50% */))

o cuerpo, pero necesitas implementar todo a través de un div con 100% de alto y ancho.img.bg ( /* Establecer reglas para rellenar el fondo / min-height: 100%; min-width: 1024px; / Configurar escala proporcional / width: 100%; height: auto; / Configurar posicionamiento / posición: fijo arriba: 0; izquierda: 0; ) @media screen y (ancho máximo: 1024px) ( / Específico de esta imagen en particular / img.bg ( izquierda: 50%; margen izquierdo: -512px; / 50% */ ) )

Funciona en cualquier versión. navegadores de calidad- Safari/Opera/Firefox y Chrome. Como siempre, IE tiene sus propios matices: IE 9 - obras; IE 7/8: la mayoría de las veces funciona correctamente, pero no centra imágenes más pequeñas que la ventana del navegador;

#bg (posición: fija; arriba: -50%; izquierda: -50%; ancho: 200%; altura: 200%; ) #bg img (posición: absoluta; arriba: 0; izquierda: 0; derecha: 0; abajo: 0; margen: automático; ancho mínimo: 50%;

#bg ( posición:fija; arriba:-50%; izquierda:-50%; ancho:200%; altura:200%; ) #bg img ( posición:absoluta; arriba:0; izquierda:0; derecha:0; abajo:0; margen:automático; ancho mínimo:50%; alto mínimo:50% )

El truco funciona en:

Safari/Chrome/Firefox (también primeras versiones no probado, pero funciona bien en los últimos)
Es decir, 8+
Opera (cualquier versión) y junto con IE, ambos tienen errores de la misma manera con un error de posicionamiento.

Método con jQuery

Esta opción es mucho más sencilla (desde el punto de vista de CSS) si sabemos que la relación de aspecto de la imagen (img utilizada como fondo) es mayor o menor que la relación de aspecto actual de la ventana del navegador. Si es menor, entonces solo podemos usar ancho = 100% y la ventana se llenará igualmente en ancho y alto. Si es más, solo puede especificar altura = 100% para llenar toda la ventana.

Acceso a todos los datos van A través de JavaScript, los códigos utilizados son los siguientes:

#bg (posición: fija; arriba: 0; izquierda: 0;) .bgwidth (ancho: 100%;) .bgheight (alto: 100%;)

#bg ( posición: fija; arriba: 0; izquierda: 0; ) .bgwidth ( ancho: 100%; ) .bgheight ( altura: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(ventana).cargar(función() ( var theWindow = $(ventana), $bg = $("#bg"), aspectoRatio = $bg.width() / $bg.height(); función resizeBg() (si ((laVentana.ancho() / laVentana.alto())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

En mi opinión, en este caso no se realiza el centrado (hasta donde tengo entendido), pero se puede hacer. La mayoría de los navegadores de escritorio son compatibles, incluido IE7+. Finalmente, el autor del artículo sobre hacks ha preparado un conjunto de archivos de ejemplo en los que se implementa todo esto; puedes descargarlo. Los comentarios al artículo original también contienen información y discusión, aunque el autor agregó la mayoría de los detalles importantes en forma de montantes a la publicación y también los traduje e indico. Por supuesto, los ejemplos te ayudarán a comprender todo esto. En general, si no fuera por los constantes "bromas" de IE7, todos los trucos mencionados serían ideales.

PD ¿Quieres comprar un libro? - No tienes que ir a la tienda porque ahora una librería online te permite hacer todo online: elegir, pagar y concertar la entrega a domicilio.

Traducción: Vlad Merzhevich

En CSS 2.1, una imagen de fondo aplicada a un contenedor conserva su tamaños fijos. Afortunadamente, CSS3 introdujo la propiedad tamaño de fondo, que permite estirar o comprimir el fondo. Es ideal si estás creando una plantilla de diseño web responsivo.

Hay varias formas de definir tamaños: eche un vistazo a la página de demostración del tamaño de fondo.

cambio de tamaño absoluto

Pueden aplicarse unidades de medida.

Tamaño de fondo: ancho-alto;

De forma predeterminada, el ancho y el alto están configurados en automático, lo que deja la imagen en sus dimensiones originales.

puedes preguntar nuevo tamaño imágenes usando unidades absolutas medidas como px, em, cm, etc. Las proporciones cambiarán si es necesario. Por ejemplo, si nuestra imagen de fondo tiene dimensiones de 200x200 píxeles, entonces el siguiente código dejará esta altura, pero hará que el ancho sea la mitad:

Tamaño de fondo: 100px 200px;

Si solo se especifica un valor, se considera el ancho. La altura se establece en automática y se conservan las proporciones:

Tamaño de fondo: 100 px;

/* similar */ tamaño de fondo: 100px auto;

Este código escala la imagen de 200x200 a 100x100 píxeles.

Cambio de tamaño relativo mediante porcentajes

Si se aplican porcentajes, las dimensiones se basan en el elemento y NO en la imagen:

Tamaño de fondo: 50% automático; Ancho imagen de fondo

, por tanto, depende del tamaño del contenedor. Si el contenedor tiene un ancho de 500px, entonces el tamaño de nuestra imagen se reducirá a 250x250. Usar porcentajes puede ser útil para diseño adaptativo

. Cambie el ancho de la página de demostración para ver cómo cambian las dimensiones.

Escalando al tamaño máximo La propiedad de tamaño de fondo también comprende palabra clave

contener. Escala la imagen para que llene el contenedor. En otras palabras, la imagen crecerá o se reducirá proporcionalmente, pero el ancho y el alto no excederán las dimensiones del contenedor:

Tamaño de fondo: contener;

Rellenar con fondo

La propiedad tamaño de fondo también comprende la palabra clave de portada. La imagen se escalará para llenar todo el contenedor, pero si las relaciones de aspecto son diferentes, la imagen se recortará.

Tamaño del fondo: portada;

Escalar múltiples fondos

Se pueden escalar varios fondos utilizando una lista de valores separados por comas en el mismo orden.

Antecedentes: url("sheep.png") 60% 90% sin repetición, url("sheep.png") 40% 50% sin repetición, url("sheep.png") 10% 20% sin repetición # 393;

Las últimas versiones de todos los navegadores admiten el tamaño de fondo sin prefijos.

IE8 y versiones inferiores no admiten esta propiedad. Puedes usar un filtro de IE para emular el contenido y los valores de cobertura, pero no hay forma de cambiar el tamaño de la imagen de fondo sin trucos como agregar una imagen real detrás de otros elementos. Es complicado, por lo que recomiendo una degradación elegante.

Del autor: En este tutorial, veremos una técnica simple para crear una imagen de fondo que se extenderá por todo el ancho de la ventana gráfica del navegador. Para hacer esto, necesitamos la propiedad CSS de tamaño de fondo; No se necesita JavaScript.

Ejemplos de imágenes de fondo enteras responsivas

Hoy en día, se ha vuelto bastante popular utilizar una fotografía enorme como fondo, que ocupa toda la página web. A continuación se muestran ejemplos de varios sitios que tienen imágenes de fondo completas responsivas:

Si desea lograr un resultado similar en su próximo proyecto web, entonces este artículo es lo que necesita.

Principios básicos

Aquí está nuestro plan de acción.

Utilice la propiedad de tamaño de fondo para llenar completamente la ventana gráfica

La propiedad CSS de tamaño de fondo está configurada para cubrir. El valor de cobertura le dice al navegador que escale automática y proporcionalmente el ancho y alto de la imagen de fondo para que siempre sea igual o mayor que el ancho/alto de la ventana gráfica.

Utilice una consulta de medios para manejar pequeñas imágenes de fondo para dispositivos móviles

Para mejorar la velocidad de carga de la página en pantallas pequeñas, usaremos una consulta de medios para procesar una versión más pequeña de nuestra imagen de fondo. Esto es opcional. Esta técnica funcionará sin ella. Pero, ¿por qué es una buena idea utilizar una imagen de fondo pequeña para dispositivos móviles?

La imagen que utilicé en la demostración tiene una resolución de 5500x3600px. Esta resolución es suficiente para la mayoría de pantallas panorámicas. monitores de computadora actualmente disponible para la venta. Pero para ello tendrás que procesar un archivo de 1,7 MB de tamaño.

Esta enorme carga de trabajo adicional sólo por publicar una foto de fondo no servirá de nada de todos modos. Y, por supuesto, esto tendrá un efecto extremadamente negativo en las conexiones que utilizan internet movil. Esta resolución también es excesiva para dispositivos con pantallas pequeñas (lo veremos con más detalle más adelante). Veamos todo el proceso.

HTML

Todo lo que necesitas para marcar es esto:

Vamos a asignar una imagen de fondo al elemento del cuerpo para que la imagen siempre llene toda la ventana gráfica del navegador.

Sin embargo, esta técnica también funcionará para cualquier persona. elemento de bloque(por ejemplo, div o formulario). Si el ancho y alto del elemento de bloque son fluidos, entonces la imagen de fondo siempre se escalará para llenar todo el contenedor.

CSS

Establezca los siguientes estilos para el elemento del cuerpo:

cuerpo ( /* Ruta a la imagen */ imagen-fondo: url(images/fondo-foto.jpg); /* La imagen de fondo siempre está centrada vertical y horizontalmente */ posición-fondo: centro centro; /* La imagen de fondo no se repite * / background-repeat: no-repeat /* La imagen de fondo está fija en la ventana gráfica, por lo que no se mueve cuando la altura del contenido es mayor que la altura de la imagen */ background-attachment: fijo /* Esto es lo que permite que la imagen de fondo se ajuste al tamaño del contenedor */ background-size: cover /* Establece el color de fondo que se mostrará mientras se carga la imagen de fondo */ background-color: #464646 )

cuerpo (

/* Ruta a la imagen */

imagen-de-fondo: URL (imágenes/foto-de-fondo.jpg);

/* La imagen de fondo siempre está centrada vertical y horizontalmente */

/* La imagen de fondo no se repite */

fondo-repetir: no-repetir;

/* La imagen de fondo se fija en la ventana gráfica para que no se mueva cuando la altura del contenido es mayor que la altura de la imagen */

/* Esto es lo que permite que la imagen de fondo se ajuste al tamaño del contenedor */

tamaño de fondo: portada;

/* Establece el color de fondo que se mostrará mientras se carga la imagen de fondo */

fondo - color: #464646;

El par propiedad/valor más importante al que prestar atención es:

tamaño de fondo: portada;

Aquí es donde comienza la magia. Este par propiedad/valor le dice al navegador que escale la imagen de fondo proporcionalmente, es decir, de modo que su ancho y alto sean iguales o mayores que el ancho/alto del elemento (en nuestro caso, el elemento del cuerpo).

Sin embargo, hay un problema con este par propiedad/valor: si la imagen de fondo tamaños más pequeños elemento del cuerpo: qué sucederá en las pantallas con resolución alta y/o cuando tienes una gran cantidad de contenido en una página, el navegador inevitablemente ampliará la imagen. Y como sabemos, cuando aumentamos las tallas mapa de bits, la calidad de la imagen disminuye (en otras palabras, se produce pixelación).

Aumentar el tamaño de la imagen en relación con tamaños originales afecta la calidad de la imagen. Tenga esto en cuenta al elegir la imagen correcta. La demostración utiliza una foto enorme de 5500x3600px para monitores de pantalla ancha, por lo que tomará mucho pantalla grande para que se produzca distorsión de la calidad. Sigamos adelante. Para asegurarnos de que la imagen de fondo esté siempre centrada en la ventana gráfica, escribiremos:

posición de fondo: centro centro;

Esta entrada coloca el fondo en el eje de coordenadas en el centro de la ventana gráfica. A continuación debemos definir qué sucede cuando la altura del contenido excede la altura visible de la ventana gráfica. Cuando esto sucede, aparece una barra de desplazamiento.

EN en este caso Necesitamos asegurarnos de que la imagen de fondo permanezca encendida. lugar original, incluso cuando el usuario se desplaza hacia abajo en la página. En esta situación, la imagen simplemente terminará cuando se desplace o se moverá a medida que avanza el desplazamiento (lo que puede distraer mucho al usuario). Para arreglar el fondo, configuramos la propiedad adjunta de fondo como fija.

adjunto de fondo: fijo;

fondo - archivo adjunto: fijo;

En la demostración, agregué una opción de "cargar contenido" para que pueda ver lo que sucede cuando aparece una barra de desplazamiento en el navegador cuando la propiedad adjunta de fondo está configurada como fija. También puede descargar la demostración y jugar con los valores de las propiedades de posicionamiento (como adjunto de fondo y posición de fondo) para ver cómo afecta el desplazamiento de la página y la imagen de fondo. El resto de los valores de las propiedades se explican por sí solos.

Taquigrafía CSS

He detallado las propiedades de fondo para que sean más fáciles de explicar. La forma abreviada también será equivalente:

cuerpo (fondo: url(fondo-foto.jpg) centro portada central sin repetición arreglada;)

cuerpo (

fondo: URL (fondo - foto. jpg) centro cubierta central sin repetición fija;

Todo lo que necesitas hacer es cambiar el valor de la URL para que apunte a tu imagen de fondo.

Opcional: consulta de medios para pantallas pequeñas

Para pantallas pequeñas utilicé programa photoshop, para reducir proporcionalmente la imagen de fondo original a 768x505px, y también usé Smush.it para reducir el tamaño un poco más. Gracias a esto, el tamaño del archivo disminuyó de 1741 KB a 114 KB. Aquellos. Tamaño de imagen reducido en un 93%.

No me malinterpreten, 114 KB sigue siendo bastante para un elemento de diseño puramente estético. Teniendo en cuenta la carga adicional de 114 KB, solo usaría dicho archivo si viera la oportunidad de mejorar significativamente la experiencia del usuario (UX) del sitio, porque... V momento presente una parte importante del tráfico de Internet proviene del funcionamiento de dispositivos móviles fondo - imagen: url (imágenes / fondo - foto - móvil - dispositivos. jpg);

La consulta de medios tiene un límite de ancho de ancho máximo: 767 px, lo que significa que si la ventana gráfica del navegador es mayor que 767 px, se cargará una imagen de fondo grande.

La desventaja de utilizar esta consulta de medios es que si cambia el ancho de la ventana de su navegador de, por ejemplo, 1200 px a 640 px (o viceversa), verá inmediatamente el momento en que se carga una imagen de fondo pequeña o grande.

Además de esto, debido al hecho de que algunos dispositivos de pantalla pequeña pueden mostrar más píxeles – por ejemplo, iPhone 5 c pantalla retina capaz de mostrar una resolución de 1136x640px; la pequeña imagen de fondo estará pixelada.

Para resumir

Puedes ver más versión actual código fuente de este artículo tutorial en GitHub. Sólo puedo advertirte de una cosa: utiliza esta técnica con precaución porque los archivos grandes pueden dañar seriamente la UX, especialmente si el usuario final utiliza una conexión a Internet lenta y poco confiable. Esta es otra razón por la que debes elegir un color de fondo adecuado para que el usuario pueda leer el contenido mientras se carga la imagen de fondo.

Una de las propiedades CSS más utilizadas en el desarrollo de sitios web es la propiedad de fondo de un elemento de página. Hoy te hablaremos de cómo puedes cambiar el tamaño de la imagen de fondo usando .

en un mayor Versiones CSS 2.1, la imagen de fondo aplicada al contenedor mantuvo sus dimensiones fijas. Fue imposible cambiar el tamaño de la imagen de fondo. Afortunadamente, CSS3 introdujo la propiedad de tamaño de fondo, que permite estirar o comprimir el fondo.

Hay varias formas de determinar las tallas.

cambio de tamaño absoluto

Si solo se especifica un valor, se considera el ancho. La altura se establece en automática y se conservan las proporciones:

/* similar */ tamaño de fondo: 100px auto;

Este código escala la imagen de 200x200 a 100x100 píxeles.

Cambio de tamaño relativo mediante porcentajes

Tamaño de fondo: contener;

: cubrir;

Tamaño del fondo: portada;

Escalar múltiples fondos

fondo: URL ("oveja.png") 60% 90% sin repetición, URL ("oveja.png") 40% 50% sin repetición, URL ("oveja.png") 10% 20% sin repetición # 393; : 240px 210px, automático, 150px;

Todo últimas versiones Los navegadores admiten la propiedad de tamaño de fondo.

Conclusión

Bueno, ahora sabemos cómo controlar el tamaño de la imagen de fondo usando mesas en cascada estilos

No olvides suscribirte a las actualizaciones del blog para no perderte nuevos artículos interesantes.

Una de las tareas principales cuando diseño adaptativo- se trata de escalar imágenes (incluidas las de fondo) para que se muestren correctamente en dispositivos con diferentes resoluciones de pantalla.

Con imágenes en la etiqueta. imagen Es simple: cuando estableces el ancho como porcentaje, la altura se escalará automáticamente. Este método no se puede aplicar a imágenes de fondo.

Este truco consiste en establecer el valor del porcentaje de relleno ( relleno) elemento. El método se publicó por primera vez en un antiguo artículo de blog A List Apart, pero aún funciona bien.

Digamos que tienes una imagen de fondo de 800 por 450 píxeles y quieres convertirla en un fondo con una relación de aspecto fija de 16:9. El siguiente código utiliza sangría. píxeles, pero todo funcionará con ellos. También hay un elemento de figura HTML5 para funcionamiento correcto en navegadores más antiguos puedes usar HTML5 shiv.

Div.column (ancho máximo: 800px;) figure.fixedratio (padding-top: 56,25%; /* 450px/800px = 0,5625 */)

Agregar un fondo

El elemento resultante se escala como se esperaba, pero si agrega una imagen de fondo, el resultado no será muy bueno. Usando el atributo tamaño de fondo: portada. Desafortunadamente, en Explorador de Internet 8 este método no funciona. Para resolver este problema, posicionamos el fondo usando posición de fondo. Imagen de fondo debe tener al menos el mismo ancho ancho máximo elemento. De lo contrario, la imagen se recortará.

Columna Div ( /* La imagen de fondo debe tener 800 px de ancho */ ancho máximo: 800 px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ imagen-de-fondo: url(http://voormedia.com/examples/north-sea-regatta.jpg); tamaño-de-fondo: portada; -moz-fondo-tamaño: portada /* Firefox 3.6 */ posición-fondo: centro /* Internet Explorer 7/8 */ )

Supongamos que tiene una imagen de fondo grande que se ve muy bien en el escritorio. pero en dispositivo móvil será demasiado pequeño, así que la decisión correcta reducirá el ancho del fondo.

Por ejemplo, una imagen con un ancho de 800 por 200 píxeles (4:1) en una pantalla pequeña, con un ancho de 300 píxeles, debería reducirse a 150 píxeles (2:1). Contemos los atributos. altura Y tapa acolchada:

La figura muestra la relación de aspecto de la imagen de fondo en diferentes anchos. La pendiente del gráfico corresponde al atributo tapa acolchada, altura inicial - al atributo altura. El código resultante es:

Columna div ( /* El fondo la imagen debe tener 800 px de ancho */ max-width: 800 px; ) figure.fluidratio ( padding-top: 10%; /* pendiente */ altura: 120px; /* altura inicial */ imagen-de-fondo: url(http://voormedia.com/examples/amsterdam.jpg); fondo- tamaño: portada; -moz-fondo-tamaño: portada /* Firefox 3.6 */ posición-fondo: centro /* Internet Explorer 7/8 */ )

Usando SCSS para el cálculo

Atributos tapa acolchada y altura se puede calcular automáticamente utilizando preprocesadores como SCSS. Un ejemplo de esto:

/* Calcular la proporción de fluidos en función de dos dimensiones (ancho/alto) */ @mixin fluid-ratio($tamaño grande, $tamaño pequeño) ( $ancho-grande: nth($tamaño grande, 1); $ancho -pequeño: nésimo($tamaño pequeño, 1); $altura-grande: nésimo($tamaño grande, 2); $altura-pequeño: nésimo($tamaño pequeño, 2); / ($ancho-grande - $ancho-pequeño); $alto: $alto-pequeño - $ancho-pequeño * $pendiente * 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Este elemento tendrá una proporción fluida de 4:1 a 800 px a 2:1 a 300 px. */ @include fluid-ratio(800px 200px, 300px 150px) imagen de fondo: url(http://voormedia.com/examples/amsterdam.jpg);

Popular en la categoría: