CSS Múltiples Fondos
En este capítulo, aprenderá cómo agregar varias imágenes de fondo a un elemento.
También aprenderá sobre las siguientes propiedades:
background-sizebackground-originbackground-clip
CSS Múltiples Fondos
CSS le permite agregar múltiples imágenes de fondo para un elemento, a través de la
background-imagepropiedad.
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
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Se pueden especificar varias imágenes de fondo utilizando las propiedades de fondo individuales (como se indica arriba) o la backgroundpropiedad abreviada.
El siguiente ejemplo usa la backgroundpropiedad abreviada (mismo resultado que el ejemplo anterior):
Ejemplo
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Tamaño de fondo CSS
La propiedad CSS background-sizele 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: contener o cubrir.
El siguiente ejemplo cambia el tamaño de una imagen de fondo a mucho más pequeña que la imagen original (usando píxeles):
Gracias por el dolor
El dolor mismo es el amor.
Por eso es para el más mínimo por venir, que nuestra práctica normal soporta para aprovechar las consecuencias.
Aquí está el código:
Ejemplo
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Los otros dos valores posibles para background-sizeson contain
y cover.
La containpalabra clave escala la imagen de fondo para que sea lo más grande posible (pero tanto su ancho como su alto 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 coverpalabra clave escala la imagen de fondo para que el área de contenido quede completamente cubierta por la imagen de fondo (tanto su ancho como su alto 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 containy cover:
Ejemplo
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definir tamaños de múltiples imágenes de fondo
La background-sizepropiedad también acepta varios valores para el tamaño del fondo (usando una lista separada por comas), cuando se trabaja con varios fondos.
El siguiente ejemplo tiene tres imágenes de fondo especificadas, con un valor de tamaño de fondo diferente para cada imagen:
Ejemplo
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
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 causar 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
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Imagen de héroe
También puede usar diferentes propiedades de fondo en un <div> para crear una imagen de héroe (una imagen grande con texto) y colocarla donde desee.
Ejemplo
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Propiedad de origen de fondo CSS
La propiedad CSS background-originespecifica 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 borde
- padding-box - (predeterminado) la imagen de fondo comienza desde la esquina superior izquierda del borde del relleno
- cuadro de contenido: la imagen de fondo comienza en la esquina superior izquierda del contenido
El siguiente ejemplo ilustra la background-originpropiedad:
Ejemplo
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Propiedad CSS background-clip
La propiedad CSS background-clipespecifica el área de pintura del fondo.
La propiedad toma tres valores diferentes:
- border-box - (predeterminado) el fondo se pinta en el borde exterior del borde
- padding-box: el fondo está pintado en el borde exterior del relleno
- cuadro de contenido: el fondo se pinta dentro del cuadro de contenido
El siguiente ejemplo ilustra la background-clippropiedad:
Ejemplo
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Propiedades de fondo avanzadas de CSS
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |