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 usuario. El siguiente ejemplo tiene dos imágenes de fondo, la primera imagen es una flor (alineada con la parte inferior derecha) y la segunda imagen es un fondo de papel (alineada con la esquina superior izquierda).
Ejm
#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 propiedad abreviada de fondo. El siguiente ejemplo usa la propiedad abreviada de fondo (mismo resultado que el ejemplo anterior).
Ejm
#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-size te 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 mucho más pequeña que la imagen original (usando píxeles).
Ejm
#div1 { background: url(img_flower.jpg); background-size: 100px 80px; background-repeat: no-repeat; }
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.
Ejm
#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; }
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 borde
- padding-box: (predeterminado) la imagen de fondo comienza desde la esquina superior izquierda del borde del relleno
- content-box: la imagen de fondo comienza en la esquina superior izquierda del contenido
El siguiente ejemplo ilustra la propiedad background-origin.
Ejm
#example1 { border: 10px solid black; padding: 35px; background: url(img_flwr.gif); background-repeat: no-repeat; background-origin: content-box; }
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 borde
- padding-box: el fondo está pintado en el borde exterior del relleno
- content-box: el fondo se pinta dentro del cuadro de contenido
El siguiente ejemplo ilustra la propiedad background-clip.
Ejm
#example1 { border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box; }
Resumen
| 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 coloca(n) la(s) imagen(es) de fondo |
| background-size | Especifica el tamaño de la(s) imagen(es) de fondo |