Día 83: CSS Multiple Backgrounds
La ruta del desarrollador web frontend autónomo🤹♂️
En este capítulo, aprenderás cómo agregar varias imágenes de fondo a un elemento. También aprenderás sobre las siguientes propiedades:
background-size,background-originybackground-clip.
Múltiples Fondos
CSS permite agregar múltiples imágenes de fondo para un elemento, a través de la propiedad background-image.
Las diferentes imágenes de fondo están separadas por comas y las imágenes se apilan una encima de la otra, donde la primera imagen está más cerca del espectador.
El siguiente ejemplo tiene dos imágenes de fondo, la primera imagen es una flor (alineada en la parte inferior y derecha) y la segunda imagen es un fondo de papel (alineado en la esquina superior izquierda):
Ejemplo:
Se pueden especificar varias imágenes de fondo utilizando las propiedades de fondo individuales (como se indica arriba) o la propiedad abreviada background.
El siguiente ejemplo usa la propiedad abreviada background (mismo resultado que el ejemplo anterior):
Ejemplo:
Tamaño de fondo
La propiedad CSS background-size permite especificar el tamaño de las imágenes de fondo.
El tamaño se puede especificar en longitudes, porcentajes o usando una de las dos palabras clave: contain o cover.
El siguiente ejemplo cambia el tamaño de una imagen de fondo a uno mucho más pequeño que la imagen original (usando píxeles):
Ejemplo:
Los otros dos valores posibles para background-size son contain y cover.
La palabra clave contain escala la imagen de fondo para que sea lo más grande posible (pero tanto el ancho como la altura deben caber dentro del área de contenido). Como tal, dependiendo de las proporciones de la imagen de fondo y el área de posicionamiento del fondo, puede haber algunas áreas del fondo que no estén cubiertas por la imagen de fondo.
La palabra clave cover escala la imagen de fondo para que el área de contenido quede completamente cubierta por la imagen de fondo (tanto su ancho como su altura son iguales o superan el área de contenido). Como tal, algunas partes de la imagen de fondo pueden no ser visibles en el área de posicionamiento del fondo.
El siguiente ejemplo ilustra el uso de contain y cover:
Ejemplo:
Define tamaños para múltiples imágenes de fondo
La propiedad background-size también acepta múltiples valores para el tamaño del fondo (usando una lista separada por comas), cuando se trabaja con múltiples fondos.
El siguiente ejemplo tiene tres imágenes de fondo especificadas, con un valor de tamaño de fondo diferente para cada imagen:
Ejemplo:
Imagen de fondo de tamaño completo
Ahora queremos tener una imagen de fondo en un sitio web que cubra toda la ventana del navegador en todo momento.
Los requisitos son los siguientes:
Rellene toda la página con la imagen (sin espacios en blanco)
Escale la imagen según sea necesario
Centrar la imagen en la página
No generar barras de desplazamiento
El siguiente ejemplo muestra cómo hacerlo; utilice el elemento <html> (el elemento <html> siempre tiene al menos la altura de la ventana del navegador). Luego establezca un fondo fijo y centrado en él. Luego ajusta su tamaño con la propiedad background-size:
Ejemplo:
Imagen Hero
También puedes usar diferentes propiedades de fondo en un <div> para crear una imagen hero (una imagen grande con texto) y colocarla donde desee.
Ejemplo:
La propiedad background-origin
La propiedad CSS background-origin especifica dónde se coloca la imagen de fondo.
La propiedad toma tres valores diferentes:
border-box- la imagen de fondo comienza en la esquina superior izquierda del bordepadding-box- (predeterminado) la imagen de fondo comienza desde la esquina superior izquierda del borde del rellenocontent-box- la imagen de fondo comienza en la esquina superior izquierda del contenido
El siguiente ejemplo ilustra la propiedad background-origin:
Ejemplo:
La propiedad background-clip
La propiedad CSS background-clip especifica el área de pintura del fondo.
La propiedad toma tres valores diferentes:
border-box- (predeterminado) el fondo se pinta en el borde exterior del bordepadding-box- el fondo está pintado hasta el borde exterior del rellenocontent-box- el fondo está pintado dentro del cuadro de contenido
El siguiente ejemplo ilustra la propiedad background-clip:
Ejemplo:
Todas las propiedades background
| Propiedad | Descripción |
background | Una propiedad abreviada para establecer todas las propiedades de fondo en una declaración. |
background-clip | Especifica el área de pintura del fondo. |
background-image | Especifica una o más imágenes de fondo para un elemento. |
background-origin | Especifica dónde se colocan las imágenes de fondo. |
background-size | Especifica el tamaño de las imágenes de fondo. |
Resumen
CSS permite agregar múltiples imágenes de fondo a través de la propiedad background-image. Además, se puede especificar el tamaño de las imágenes de fondo con la propiedad background-size. También se pueden definir tamaños para múltiples imágenes de fondo y establecer la propiedad background-origin para especificar dónde se coloca la imagen de fondo. La propiedad background-clip especifica el área de pintura del fondo. Se puede utilizar la propiedad abreviada background para establecer todas las propiedades de fondo en una declaración.
Traducido con 💚 desde W3Schools.com