Controlar el tamaño de la imagen de fondo usando CSS. Escalando al tamaño máximo

Visualmente puedo notar la diferencia, pero ¿en qué situaciones debo elegir uno u otro? ¿Tiene sentido utilizarlos o pueden sustituirse por porcentajes?

Actualmente, parece que no puedo ir más allá del método de prueba y error para usar estas propiedades, que es donde me mete la cabeza.

También puedo encontrar las explicaciones bastante vagas y especialmente el documento del W3C me parece bastante desconcertante.

Los valores tienen los siguientes significados:

"contiene

Escale la imagen, manteniendo su relación de aspecto interna (si corresponde), hasta gran tamaño, de modo que su ancho y alto puedan caber dentro del área de posicionamiento del fondo.

Escale la imagen, manteniendo su relación de aspecto interna (si la tiene), al tamaño más pequeño para que su ancho y alto puedan cubrir completamente el área de posicionamiento del fondo.

Probablemente soy un poco tonto, pero ¿alguien puede darme una explicación sencilla sobre Inglés con ejemplos relativos?

6 respuestas

Puede consultar los pseudocódigos que controlan la salida. Los valores asignados para el tamaño de la imagen dependen directamente de las proporciones de la relación de aspecto del contenedor. imagen de fondo.

Nota: Relación de aspecto = ancho / alto

Contiene

if (relación de aspecto del contenedor > relación de aspecto de la imagen) altura-imagen = altura del contenedor ancho-imagen = ancho preservado de la relación de aspecto else ancho de imagen = ancho del contenedor altura-imagen = altura preservada de la relación de aspecto

Cubrir

if (relación de aspecto del contenedor > relación de aspecto de la imagen) ancho de imagen = ancho del contenedor altura de la imagen = altura preservada de la relación de aspecto else altura de la imagen = altura del contenedor ancho de imagen = ancho preservado de la relación de aspecto

¿Ves la actitud? En ambos casos, cubrir y contener, se conserva la relación de aspecto. Pero las condiciones si – si no se aplican en ambos casos.

Esto es lo que hace la cobertura por la cobertura. página llena, sin parte blanca visible. Cuando la relación de aspecto del contenedor sea mayor, escale la imagen para que su ancho sea igual al ancho del contenedor. Ahora la altura será mayor ya que la relación de aspecto es menor. Entonces cubre toda la página sin ninguna parte blanca.

P. ¿Se pueden sustituir por intereses?

No, no sólo por porcentaje. Necesitará aire acondicionado.

P. ¿En qué situaciones debo elegir uno tras otro?

Cuando creas un sitio web, no quieres una parte blanca sobre un fondo fijo. Así que usa cobertura.

contener, por otro lado, se puede utilizar cuando se utiliza un fondo repetido (por ejemplo, cuando se tiene una imagen con una relación de aspecto muy alta por veiwport/container, se puede usar contener y configurar la repetición de fondo en repetir-y ). Pero un uso más apropiado para contener sería para elemento fijo alto/ancho.

Aunque la pregunta supone que el lector ya comprende cómo funcionan los valores de contenido y cobertura para el tamaño de fondo, aquí hay una paráfrasis simple en inglés de lo que dice la especificación que puede servir como una introducción rápida:

tamaño de fondo: contiene garantiza que toda la imagen de fondo se ajuste área de fondo, manteniendo la relación de aspecto original. Si el área del fondo es más pequeña que la imagen, la imagen se reducirá para que quepa en el área del fondo. Si el área de fondo está arriba o encima de la imagen, entonces cualquier parte del área que no esté ocupada por la imagen principal se llenará con repeticiones de la imagen o buzones/espacios en blanco si la repetición de fondo está configurada en no repetición.

tamaño de fondo: la portada hace que la imagen de fondo sea lo más grande posible para que ocupe toda el área del fondo sin dejar espacios. La diferencia entre portada y 100% 100% es que se conserva la relación de aspecto de la imagen, por lo que no se produce un estiramiento antinatural de la imagen.

Tenga en cuenta que ninguno de estos dos valores de palabras clave se puede expresar utilizando ninguna combinación de longitudes, porcentajes o palabras clave automáticas.

Entonces, ¿cuándo usas uno sobre el otro? Personalmente creo que la portada tiene más aplicación práctica que contener, así que iré primero. 1

tamaño de fondo: portada

Uno ejemplo general El uso de background-size: cover es en un formato de pantalla completa donde la imagen de fondo es rica en detalles, como una fotografía, y desea que esa imagen se muestre de manera destacada, aunque sea como fondo y no como contenido principal.

Desea que la imagen sea lo suficientemente grande como para cubrir completamente la ventana gráfica o la pantalla del navegador, independientemente de la relación de aspecto de la ventana gráfica, o si la imagen o la ventana gráfica está en formato vertical o vertical. vista del álbum. No le importa si esto hace que se recorte alguna parte de la imagen, siempre y cuando la imagen ocupe toda el área del fondo y mantenga su relación de aspecto original.

A continuación se muestra un ejemplo de un diseño en el que el contenido se coloca sobre un fondo blanco translúcido que se sitúa sobre un fondo de pantalla completa. Cuando aumentas la altura de un área. avance, tenga en cuenta que la imagen se escala automáticamente para garantizar que aún cubra toda el área de vista previa.

Html (altura: 100%; imagen de fondo: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg); posición de fondo: centro centro; tamaño de fondo: portada; fondo -repetir: no repetir; fondo adjunto: fijo;) cuerpo (ancho: 80%; altura mínima: 100%; color de fondo: rgba(255, 255, 255, 0.5); margen: 5em automático; relleno: 1em)

Si usa background-size: contiene, lo que sucede es que la imagen de fondo se comprime para que toda la imagen quepa dentro del área de vista previa. Esto deja feos cuadros blancos alrededor de la imagen dependiendo de la relación de aspecto del panel de vista previa, lo que arruina el efecto.

tamaño de fondo: contiene

Entonces, ¿por qué usar background-size: contiene si deja feos espacios en blanco alrededor de la imagen? Un caso de uso que me viene a la mente de inmediato es que el diseñador no necesita espacios en blanco si toda la imagen cabe dentro del área del fondo.

Esto puede parecer descabellado, pero ten en cuenta que no todas las imágenes quedan mal con espacios vacíos a su alrededor. Aquí es donde el ejemplo del uso de un logotipo en lugar de una foto realmente lo demuestra. de la mejor manera posible, aunque probablemente no utilices el logo como imagen de fondo.

El logotipo suele tener una forma irregular, asentado en un espacio en blanco o completamente fondo transparente. Esto deja un lienzo que se puede llenar. color sólido u otros antecedentes. El uso de tamaño de fondo: contiene garantiza que toda la imagen coincida con el fondo sin ninguna parte, pero la imagen aún se verá como en casa en el lienzo.

Pero esto no tiene por qué aplicarse a la imagen. forma irregular. También se puede aplicar a imágenes rectangulares. Siempre que requiera que no haya recortes en la imagen de fondo, el espacio en blanco puede verse como un compromiso razonable o no tenerlo en absoluto. de gran importancia. Recuerda los diseños ancho fijo? Piense en el tamaño de fondo: contiene, esencialmente eso, pero para imágenes de fondo tanto en orientación vertical como horizontal: si puede garantizar que el contenido siempre encajará dentro de los límites de la imagen de fondo en todo momento, entonces los espacios en blanco se vuelven completamente irrelevantes para el problema.

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 pantallas.

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 ( /* El fondo la imagen debe tener 800 px de ancho */ max-width: 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 un dispositivo móvil será demasiado pequeño, por lo 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 ( /* La imagen de fondo debe tener 800 px de ancho */ ancho máximo: 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);

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 procesar 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

Para marcar solo necesitas 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 /* Sets; 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;

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, lo que sucederá en pantallas de alta resolución y/o cuando tenga una gran cantidad de contenido en la 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;

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 de dispositivos móviles imagen de fondo: url (imágenes/fotos de fondo-dispositivos-móviles. 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, por ejemplo de 1200 px a 640 px (o viceversa), verá inmediatamente el momento en que se carga la 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 conservó su tamaños fijos. Fue imposible cambiar el tamaño de la imagen de fondo. Afortunadamente, CSS3 introdujo la propiedad 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:

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:

Rellenar con fondo

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

: cubrir;

Escalar múltiples fondos

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

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.

La resolución de los monitores crece constantemente y a la hora de diseñar páginas web debemos tener en cuenta los aspectos más amplia gama permisos. Esto es especialmente importante cuando se utiliza imagen de fondo, que se corta cuando la resolución del monitor es baja o, por el contrario, no se ajusta por completo cuando resolución alta. Una solución a esta situación es escalar el fondo. Por supuesto, esto promete algunos problemas, como la aparición de distorsiones y artefactos en las imágenes, pero también amplía el arsenal de herramientas de diseño.

El tamaño está controlado por la propiedad background-size; la palabra clave cover se puede especificar como un valor, luego el tamaño de la imagen será tal que su ancho y alto encajen. área especificada(por ejemplo, la ventana de una página web); La palabra clave contiene escala la imagen para que al menos un lado de la imagen encaje completamente en el área especificada. Además, es aceptable indicar dimensiones horizontales o verticales explícitas en porcentajes u otros unidades CSS. En la figura. 1 muestra el cambio en el tamaño de la imagen cuando diferentes significados tamaño de fondo. Gris Se selecciona un bloque de 280x200 píxeles, dentro del cual se establece el fondo.

Arroz. 1. Tipo de imágenes de fondo según el valor del tamaño del fondo.

Si se especifican dos valores de tamaño separados por un espacio, entonces el primer valor determina el ancho horizontal y el segundo determina el ancho vertical. En este caso, se ignoran las proporciones, lo que se ve claramente en la Fig. 1 año En lugar de uno de los tamaños, está permitido utilizar la palabra clave auto, luego el navegador la calcula automáticamente en función de las proporciones de la imagen.

El ejemplo 1 establece una foto de fondo que ocupa toda la ventana del navegador.

Ejemplo 1. Imagen de fondo

Resultado este ejemplo mostrado en la Fig. 2. A medida que cambia el tamaño de la ventana, la foto crecerá o se reducirá hasta ocupar toda la página web.