Varias imágenes de fondo. ¿Es posible agregar imágenes de fondo a las listas?

Puede agregar varias imágenes de fondo a un elemento a la vez mediante una única propiedad de fondo. Esto le permite arreglárselas con un elemento para crear fondo complejo o una imagen, mostrándola varias veces con varias configuraciones. Todas las imágenes con sus parámetros se enumeran separadas por comas, indicando primero la imagen que se muestra encima de las demás imágenes y, en consecuencia, la de abajo, la última. El ejemplo 1 muestra cómo crear un fondo con tres imágenes.

Ejemplo 1. Tres fondos

Si necesita especificar por separado algunos propiedad de estilo para un fondo, como tamaño de fondo como en el ejemplo anterior, los parámetros para cada fondo se enumeran separados por comas. El resultado de este ejemplo se muestra en la Fig. 1.

Arroz. 1. Fondo con tres imágenes

Las imágenes de fondo individuales le permiten cambiar su posición y también animarlas, como se muestra en el ejemplo 2.

Ejemplo 2. fondo animado

Consideremos ahora cómo usar una imagen para crear un bloque con un marco (Fig. 2). El ancho del bloque es fijo y la altura varía según el volumen del contenido del bloque.

Arroz. 2. Marco dibujado a mano

La figura muestra claramente las partes superior e inferior que deben recortarse. editor gráfico y colóquelo horizontalmente. La parte media se selecciona de modo que se repita verticalmente sin costuras. La imagen tiene un patrón repetitivo pronunciado, por lo que no debería haber dificultad para resaltarla. El resultado será una imagen preparada (Fig. 3). El campo a cuadros indica transparencia; le permite establecer un fondo de color junto con las imágenes y cambiarlo fácilmente a través de estilos.

Arroz. 3. Imagen preparada para el fondo.

El fondo en sí se muestra mediante la propiedad de fondo, que también especifica las coordenadas del fragmento deseado. Los parámetros de cada fondo se enumeran separados por comas y en en este caso su orden importa. Queremos que la parte superior e inferior del bloque no se superpongan, por eso las colocamos primero (ejemplo 3). El color de fondo se especifica al final.

Ejemplo 3. Varios imágenes de fondo

El primer fondo muestra el borde superior del bloque, el segundo fondo, el inferior y el tercero, los bordes verticales. El último es el color que se ve en la parte central transparente del bloque (Fig. 4).

En CSS 2, es imposible agregar dos fondos a un elemento al mismo tiempo, por lo que debes anidar un elemento dentro del otro y darle a cada uno su propia imagen de fondo. Para diseños complejos, a veces se pueden contar hasta una docena de estos archivos adjuntos. Está claro que semejante choque no conduce a nada bueno, pero ¿qué hacer? ¡Resulta que hay algo! En CSS 3 puedes agregar múltiples imágenes de fondo para cualquier elemento. Entonces tomamos el dibujo del bloque (Fig. 1), lo cortamos en pedazos y comenzamos a probarlo en los navegadores.

Arroz. 1. Bloquear el sitio

Para simplificar, tomaré el ancho del bloque. tamaño fijo, y la altura se ampliará según el contenido. Las partes superior e inferior son claramente visibles en el dibujo; las recorté en el editor y las doblé en capas en un archivo separado. La parte media hay que elegirla de forma que se repita verticalmente sin costuras. El diseño tiene un patrón repetitivo bien definido, por lo que no debería haber dificultad para resaltarlo. Copio y pego a los fragmentos anteriores. El resultado será una imagen como esta (Fig. 2).

Arroz. 2. Imágenes preparadas

En principio, puedes guardar cada fragmento como archivo separado, pero los sprites CSS (la llamada tecnología de pegar varias imágenes en una) tienen una serie de ventajas. En primer lugar, el número de solicitudes al servidor se reduce debido a la reducción del número de archivos y, en segundo lugar, las imágenes se cargan y muestran más rápido en total.

El fondo en sí se muestra mediante la propiedad de fondo, que también especifica las coordenadas del fragmento deseado. Los parámetros de cada fondo se enumeran separados por comas y, en este caso, su orden importa. Quiero que la parte superior e inferior del bloque no se superpongan, así que las coloco primero (ejemplo 1).

Ejemplo 1. Varias imágenes de fondo

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

El primer fondo muestra el borde superior del bloque, el segundo fondo, el inferior y el tercero, los bordes verticales.

Revisamos los navegadores. explorador de Internet 8 no mostró ninguna imagen, otros navegadores (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) mostraron el marco correctamente (Fig. 3).

Arroz. 3. Vista de marco en el navegador Safari

Usando múltiples orígenes La situación para los desarrolladores se simplifica enormemente, especialmente a la hora de diseñar bloques. Sólo queda una cosita. Es necesario que el navegador IE 6–8 deje de existir.

• Tutorial

Ya hemos abordado las capacidades del módulo Fondos y bordes CSS3, analizando cómo trabajar con sombras (). Hoy hablaremos un poco de otro. interesante oportunidad- usando múltiples imágenes de fondo.

Composición de fondo

Hay muchas razones por las que es posible que desees componer varias imágenes de fondo, las más importantes son:

• ahorro de tráfico en el tamaño de la imagen si imágenes individuales en total pesan menos que una imagen con capas aplanadas, y
• la necesidad de un comportamiento independiente de las capas individuales, por ejemplo, al implementar efectos de paralaje.

Puede haber otras razones razonables :)

Enfoque clásico

Entonces necesitamos colocar varias imágenes de fondo una encima de la otra. ¿Cómo se suele solucionar este problema? Es muy sencillo: para cada imagen de fondo se crea un bloque al que se le asigna la imagen de fondo correspondiente. Los bloques se anidan unos dentro de otros o se colocan en una fila con reglas de posicionamiento adecuadas. He aquí un ejemplo sencillo:

Un bloque con la clase "pesca" dentro de "sirena" es sólo para fines de demostración.

Ahora algunos estilos:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (alto:300px; ancho:480px; posición: relativa;) .sample1 .sea (fondo: url(media/sea.png) repetir-x arriba a la izquierda;) .sample1 .mermaid (fondo: url(media/mermaid.svg) repetir-x abajo a la izquierda;) .sample1 .fish (fondo: url(media/fish.svg) no repetir; alto:70px; ancho:100px; izquierda : 30px; arriba: 90px; posición: absoluta) .sample1 .fishing (fondo: url(media/fishing.svg) sin repetición arriba a la derecha 10px;)

Resultado:

EN en este ejemplo tres fondos anidados y un bloque con peces ubicado al lado de los bloques de “fondo”. En teoría, los peces se pueden mover, por ejemplo, con usando javascript o Transiciones/Animaciones CSS3.

Por cierto, este ejemplo de ".fishing" utiliza la nueva sintaxis para el posicionamiento en segundo plano, también definida en CSS3:
fondo: url(media/fishing.svg) sin repetición arriba a la derecha 10px;
En este momento es compatible con IE9+ y Opera 11+, pero no con Firefox 10 y Chrome 16. Por lo tanto, los usuarios de los dos últimos navegadores aún no podrán pescar.

Múltiples orígenes

viene al rescate nueva opción, agregado a CSS3, es la capacidad de definir múltiples imágenes de fondo para un elemento. Se parece a esto:

Y los estilos correspondientes:
.sample2 .sea ( altura: 300 px; ancho: 480 px; posición: relativa; imagen de fondo: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); posición de fondo: arriba a la derecha 10px, abajo a la izquierda, arriba a la izquierda; repetición de fondo: no repetir, repetir-x, repetir-x;) .sample2 .fish (fondo: url("media/fish.svg ") sin repetición; alto: 70 px; ancho: 100 px; izquierda: 30 px; arriba: 90 px; posición: absoluta; )
Para definir varias imágenes, debe utilizar la regla de imagen de fondo, enumerando las imágenes individuales separadas por comas. Reglas adicionales, también como lista, puedes configurar posicionamiento, repeticiones y otros parámetros para cada imagen. Tenga en cuenta el orden en que se enumeran las imágenes: las capas se enumeran de izquierda a derecha, de arriba a abajo.

El resultado es exactamente el mismo:

Una regla

Si no es necesario separar el pez en un bloque separado para manipulaciones posteriores, la imagen completa se puede reescribir con uno regla simple:

Estilos:
.sample3 .sea ( altura: 300 px; ancho: 480 px; posición: relativa; imagen de fondo: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); posición de fondo: arriba a la derecha 10px, abajo a la izquierda, 30px 90px, arriba a la izquierda; repetición de fondo: sin repetición, repetición-x;)

No mostraré una imagen del resultado; créanme, coincide con las dos imágenes de arriba. Pero preste atención nuevamente a los estilos, especialmente a "repetición de fondo": según la especificación, si falta parte de la lista al final, entonces el navegador debe repetir la lista especificada la cantidad de veces requerida para que coincida con la cantidad de imágenes. en la lista.

En este caso, equivale a esta descripción:
repetición de fondo: no repetir, repetir-x, no repetir, repetir-x;

Aún más corto

Si recuerdas CSS 2.1, definió la capacidad de describir imágenes de fondo V forma corta. ¿Qué tal varias imágenes? Esto también es posible:

Muestra4 .sea (altura: 300 px; ancho: 480 px; posición: relativa; fondo: url ("media/fishing.svg") arriba a la derecha 10 px sin repetición, url ("media/mermaid.svg") abajo a la izquierda repetir-x , url("media/fish.svg") 30px 90px sin repetición, url("media/sea.png") repetir-x)

Pero tenga en cuenta que ahora no puede simplemente omitir valores (a menos que coincidan con el valor predeterminado). Por cierto, si desea establecer el color de la imagen de fondo, debe hacerlo en la última capa.

Imágenes dinámicas

Si la composición es estática o dinámica como máximo dependiendo del tamaño del contenedor, entonces varios fondos obviamente simplifican el diseño de la página. Pero, ¿qué sucede si necesita trabajar con elementos individuales de la composición independientemente de JavaScript (mover, desplazarse, etc.)?

Por cierto, aquí hay un ejemplo de la vida: un tema con un diente de león en Yandex:


Si miras el código, verás algo como esto:

...

Los bloques con clases "b-fluff-bg", "b-fluff__cloud" y "b-fluff__item" contienen imágenes de fondo que se superponen entre sí. Además, el fondo con nubes se desplaza constantemente y los dientes de león vuelan por la pantalla.

¿Se puede reescribir esto utilizando múltiples fondos? En principio, sí, pero sujeto a 1) compatibilidad con esta función en los navegadores de destino y... 2) siga leyendo;)

¿Cómo agregar dinámicas a múltiples fondos? En tal situación, resulta conveniente que en la representación interna el navegador distribuya los parámetros individuales de las imágenes de fondo según las reglas apropiadas. Por ejemplo, para el posicionamiento existe la "posición de fondo", y para los turnos basta con cambiar solo esto. Sin embargo, el uso de varias imágenes tiene un costo: esta regla (y cualquier otra similar) requiere que indiques la posición de todos los fondos definidos para tu bloque, y no puedes hacerlo de forma selectiva.

Para agregar animación a nuestro fondo de peces, puedes usar el siguiente código:
$(documento).ready(función() ( var mar = $(".sample5 .sea"); var pecesX = 30; var pecesY = 90; var pezX = 0; var pezY = 0; var sirenaX = 0; var t = 0; función animaciónLoop() ( pecesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--pecesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; pezY = -10 + (10 * Math.cos(t * 0,091)); pezX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "arriba " + pezY + "px derecha " + pezX + "px, " + sirenaX + "px abajo", + pecesX + "px " + pecesY + "px, arriba a la izquierda"; ventana.requestAnimFrame(animationLoop); ) animaciónLoop(); ));
Dónde
window.requestAnimFrame = (función() ( devolver window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (función(devolución de llamada) ( window.setTimeout(devolución de llamada, 1000/60 )); ))();

Y, por cierto, las animaciones también se pueden hacer usando transiciones/animaciones CSS3, pero este es un tema para una discusión aparte.

Paralaje e interactividad

Finalmente, maniobras similares pueden agregar fácilmente efectos de paralaje o interacción interactiva con el fondo:

Múltiples imágenes de fondo son útiles en tales escenarios, ya que si bien estamos hablando solo del fondo (y no del contenido), su uso nos permite evitar ensuciar el código html y DOM. Pero todo tiene un precio: no puedo recurrir a elementos individuales composiciones por nombre, id, clase o algún otro parámetro. Debo recordar explícitamente el orden de los elementos en la composición del código y, para cada cambio en cualquier parámetro de cualquier elemento, de hecho, debo pegar una línea que describa los valores de este parámetro para todos los elementos y actualizarlo para toda la composición.

Sea.style.backgroundPosition = "arriba " + pezY + "px derecha " + pezX + "px, " + sirenaX + "px abajo", + pecesX + "px " + pecesY + "px, arriba a la izquierda";

Estoy seguro de que esto se puede incluir en un conveniente código javascript, que se hará cargo de la virtualización de las relaciones con capas separadas, dejando el código html de la página lo más limpio posible.

¿Qué pasa con la compatibilidad?

Todo versiones modernas navegadores populares, incluido IE9+, admiten múltiples imágenes (puedes comprobarlo, por ejemplo, con caniuse).

También puede utilizar Modernizr para proporcionar a los navegadores que no admiten múltiples fondos soluciones alternativas. Como escribió Chris Coyier en su publicación sobre el orden de las capas cuando se usan múltiples fondos, haga algo como esto:

Cuerpo de Multiplebgs ( /* Impresionantes declaraciones de BG múltiples que trascienden la realidad y los polluelos sin recursos */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Si está confundido acerca del uso de JS para proporcionar compatibilidad con versiones anteriores, simplemente puedes declarar el fondo dos veces, sin embargo, esto también tiene sus desventajas en forma de una posible doble carga de recursos (esto depende de la implementación). procesamiento css V navegador específico):

/* respaldo de bg múltiple */ background: #000 url(...) ...; /* Impresionantes múltiples declaraciones de BG que trascienden la realidad y las chicas sin recursos */ background url(...), url(...), url(...), #000 url(...);

Si ya ha empezado a pensar en Windows 8, tenga en cuenta que puede utilizar varios fondos al desarrollar aplicaciones estilo metro, ya que utiliza el mismo motor que IE10.

PD. Sobre el tema: no puedo evitar recordar el fantástico artículo sobre.

Etiquetas:

• css3
• múltiples orígenes
• fronteras y fondos

Agregar etiquetas

Una parte importante del diseño web son los fondos CSS. Las propiedades de fondo contienen colores e imágenes que sirven como fondo del contenido y son responsables de la estética del sitio. Eliminar fondos CSS de su sitio y lo más probable es que aparezca como texto sobre un fondo blanco.

Si bien son relativamente fáciles de entender, los fondos CSS pueden causar confusión y plantear una serie de preguntas cuando se trabaja en tareas específicas. Intentaremos aclarar este malentendido y responder las preguntas que surjan a la hora de resolver problemas específicos.

¿Qué son los fondos CSS?

Básicamente, el nombre de los fondos CSS contiene su definición. Esto es lo que agregas al fondo de un elemento. Más precisamente, son el color o la imagen ubicada detrás del contenido que se agregó dentro del elemento. Al desarrollar un sitio web basado en CSS, estos colores e imágenes suelen ser responsables de mayoría diseño en su plantilla.

El fondo del elemento se describe según modelo de bloque CSS. Los márgenes no forman parte del fondo, pero los bordes, el relleno y el ancho del contenido sí forman parte del fondo.

Hay 5 propiedades de fondo que se aplican a Selector CSS, 4 de los cuales se aplican a imágenes de fondo:

Color de fondo (color de fondo) - – conjuntos color de fondo elemento. El color se puede configurar en hexadecimal, rgb o uno de los nombres de color limitados. Además, el color de fondo se puede establecer en transparente o heredar un valor. elemento padre. Para obtener más detalles, consulte el artículo Imagen de fondo: establece la imagen como fondo del elemento y su valor se parece a una URL (“ruta a la imagen”). La propiedad background-image también puede tener los valores none y heredar. Repetición de fondo (repetición de fondo): establece una repetición de la imagen de fondo. Valores: repetir, no repetir, repetir-x, repetir-y y heredar. Adjunto de fondo: establece cómo aplicación en segundo plano se moverá con la página. Puede desplazarse (desplazarse, cuando se desplaza la página, se mueve con el elemento, valor predeterminado), permanecer fijo (fijo, permanece fijo en el caso de que se desplace la página) o heredar el valor del elemento principal. Posición de fondo: establece la posición inicial de la imagen de fondo en el elemento. La propiedad de posición de fondo tiene dos valores, posición horizontal (puede ser izquierda, centro, derecha) y posición vertical (puede ser arriba, centro, abajo). La posición del fondo también se puede establecer en un% de la esquina superior izquierda del elemento.

Reducir las reglas de fondo de CSS

Es posible configurar cada propiedad de fondo individualmente, pero en la práctica es mejor simplificarlo. En este caso, las propiedades deben configurarse en el siguiente orden: color, imagen, repetición, aplicación, posición (color, imagen, repetición, archivo adjunto, posición).

Div (fondo: #0088ff, url ("ruta-a-una-imagen"), repetición-x, desplazamiento, arriba a la izquierda)

Con esta simplificación, no es necesario configurar todas las propiedades, pero debe usarse orden correcto . Las propiedades que no especifique tendrán los siguientes valores predeterminados:

• color de fondo: transparente
• imagen de fondo: ninguna
• repetición de fondo: repetir
• archivo adjunto de fondo: desplazamiento
• posición de fondo: 0% 0%

A continuación se muestra un ejemplo de notación abreviada:

Fondo: #0077ff fondo: url("ruta a la imagen") fondo sin repetición: url("ruta a la imagen") arriba a la izquierda

En cada una de las líneas de código anteriores, se utilizarán valores predeterminados para propiedades que no están configuradas específicamente.

Las imágenes de fondo CSS no son imágenes HTML

Es importante entender que las imágenes especificadas con usando CSS Los fondos se comportan de manera diferente a las imágenes especificadas usando la etiqueta. .

La etiqueta img crea nuevo bloque. La imagen de fondo CSS se coloca en bloque existente. No puede agregar márgenes, un borde o un fondo a una imagen de fondo CSS. Además, a una imagen de fondo CSS no se le puede dar ancho ni alto.

Dado que una imagen en html es un bloque nuevo (un bloque en línea, es decir, que está envuelto alrededor de otros elementos), tiene un ancho y alto, relleno y márgenes, así como un borde. Además, a etiqueta img puedes aplicar fondo imagen CSS. No sé con qué frecuencia se usa esto en la práctica, pero si lo deseas, puedes agregar una imagen de fondo detrás de la imagen.

Respuestas a preguntas comunes

Aunque la propiedad de fondo es relativamente fácil de usar y comprender, trabajar con ella aún puede plantear una serie de preguntas.

1. ¿Por qué no se muestra la imagen de fondo?

Esto suele deberse a que el elemento no tiene ni ancho ni alto. Recuerde que una imagen de fondo no crea un bloque, sino que llena uno existente. Si este bloque no tiene ni ancho ni alto, simplemente no hay nada que llenar. La solución es dar dimensiones al elemento. Puede darle al elemento (no a la imagen de fondo) una altura y un ancho, o llenar el elemento con contenido, donde el ancho y el alto se crean ellos mismos.

En algunos casos, un elemento puede contener contenido que se ha aplicado a propiedad flotante, que saca el contenido del flujo principal del documento. En este caso, el elemento que contiene el contenido (donde quieren agregar un fondo) formalmente no tiene dimensiones. Para que un elemento tenga dimensiones (para que el contenido al que se aplica la propiedad flotante no parezca salirse del flujo principal del documento), debe aplicar propiedad de desbordamiento.

2. ¿Puedo utilizar varias imágenes de fondo?

Si y no. La especificación CSS3 le permite utilizar varias imágenes de fondo; sin embargo, dado que no todos los navegadores se guían completamente por esta especificación, es mejor no utilizar varias imágenes.

También debes recordar que puedes aplicar un fondo a todos los elementos HTML. Digamos que tienes un div que contiene un h2 y un párrafo. ¡Puedes aplicar imágenes de fondo a cada uno de ellos y, controlando otras propiedades CSS, puedes lograr lo que deseas! efecto. También puedes insertar divs y spans adicionales dentro y fuera del elemento, lo que creará más elementos a los que puedes agregar un fondo. Este enfoque es bastante engorroso, pero funciona.

3. ¿Cómo intercambiar imágenes de fondo cuando pasas el mouse sobre un elemento?

Hay dos maneras. Debe agregar una nueva regla al elemento con la pseudoclase:hover para que apunte (imagen de fondo) a una nueva imagen, o haga que la imagen se vea como Sprite CSS y cambiar su posición de fondo (posición de fondo) para mostrar una parte diferente del sprite.

Es importante tener en cuenta que las versiones anteriores de IE no admiten de forma nativa la pseudoclase :hover, por lo que necesitarás un poco de JavaScript para que estos métodos funcionen en IE. Prefiero usar la solución de pez lechón, la misma solución que uso para los menús desplegables.

4. ¿Cómo hacer que las imágenes de fondo sean transparentes?

Puede agregar transparencia a una imagen al crearla en Photoshop. En este caso, se puede cambiar el tipo de imagen, pero aún así no podrás ver a través de ella.

5. ¿Puedo colocar una imagen de fondo en una tabla, fila de tabla o celda de tabla?

Sí. Todos estos son elementos html, por lo que pueden tomar propiedades de fondo. Sin embargo, los fondos de las mesas tienen el camino difícil Definición que utiliza capas y transparencia como se muestra en la imagen a continuación:

El fondo de un elemento en una capa es visible sólo si el fondo de las capas superiores es transparente. Esto puede parecer bastante confuso, razón por la cual muchas personas prefieren usar atributos html al crear fondos para tablas.

Afortunadamente, el valor de transparencia está configurado por defecto, por lo que las capas superiores ya deberían ser transparentes. Sin embargo, una vez que comiences a agregar fondos a una parte de la tabla, logra Operación adecuada puede ser bastante dificil

.

6. ¿Es posible agregar una imagen de fondo a los bordes?

Aún no. Se promete que esta propiedad se implementará en CSS3. Si no le importa que no funcione en muchos navegadores, puede usarlo ahora.

7. ¿Puedo agregar imágenes de fondo a las listas?

Sí. Las listas son los mismos elementos html, por lo que pueden aceptar imágenes de fondo. Una imagen de fondo se puede utilizar fácilmente como viñeta para una lista. Creo que no habrá dificultades con esto.

8. ¿Cómo agregar relleno a una imagen de fondo?

Como mencioné anteriormente, una imagen de fondo no crea un nuevo bloque CSS, por lo que no puedes agregarle un fondo. En su lugar, debe utilizar la propiedad de posición de fondo para compensar la imagen de fondo resultante. También existen otros métodos.

9. Cómo alinear una imagen de fondo a la derecha.

Al igual que en las preguntas anteriores, la respuesta está relacionada con la posición de fondo. Utilice el valor correcto para la propiedad de posición de fondo (posición de fondo: derecha;) y la imagen se alineará con el borde derecho del elemento.

10. ¿Por qué no aparece la imagen de fondo al imprimir?

No hay control sobre esta propiedad. buena razón. Se necesita mucha tinta para imprimir una imagen, por lo que muchas personas optan por no imprimirla. La impresión o no de una imagen se configura individualmente en el navegador. Recomiendo dejar todo como está, pero si decide imprimir, aquí tiene una forma de evitar la prohibición de imprimir imágenes de fondo justaddwater.dk/2009/09/29/print-css-background-logo-hack/.

11. ¿Cómo extiendo una imagen de fondo para que se ajuste a un elemento?

A otros solución posible sirve para crear una imagen que es mucho más grande de lo necesario y la posición del fondo se establece en 50% 50%. De esta manera, la imagen de fondo quedará centrada dentro del elemento y, a medida que aumenta el ancho del elemento, Mas imagenes se vuelve visible. La imagen permanecerá centrada.

No se está estirando exactamente, pero sí asegura que la imagen llene el espacio a medida que éste se hace más grande.

12. ¿Es posible incluir un enlace alrededor de una imagen de fondo?

No. Una vez más, las imágenes de fondo no crean bloques. La solución sería agregar un enlace alrededor de todo el contenido dentro del elemento html, o envolver el enlace alrededor del elemento mismo. La elección de la opción depende del elemento html y del contenido dentro de este elemento.

Conclusión

Espero que este artículo le ayude a resolver los problemas que pueden surgir al trabajar con fondo Propiedades CSS , o resolver su problema. Importante recordar, fondos CSS no cree nuevos bloques. Sólo llenan bloques html existentes. Comprender esto le ayudará a determinar qué puede y qué no puede hacer con las imágenes de fondo.

Los fondos CSS influyen en el impacto que tiene su diseño en el usuario. papel clave. La mayoría de las imágenes que cree para su sitio se configurarán utilizando la propiedad de fondo, por lo que esto es lo primero que debe dominar.