Con CSS, puede controlar el fondo de los elementos. Puede establecer un background-color para llenarlo con un color sólido, un background-image para llenarlo con (lo adivinaste) una imagen, o incluso ambas:
body {
background-color: red;
background-image: url(pattern.png);
}Aquí hay un ejemplo en el que estoy usando un archivo de imagen SVG como fondo, incrustado directamente en el CSS como una URL de datos.
Vea el color de fondo del lápiz y la imagen juntos por Chris Coyier (@chriscoyier) en CodePen.
Esa es solo una imagen allí, repetida, pero en realidad podemos establecer varias imágenes de fondo si queremos. Lo hacemos separando los valores con comas.
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}Si lo dejamos así image-one.jpg repetirá y cubrirá por completo image-two.jpg. Pero también podemos controlarlos individualmente, con otras propiedades de fondo.
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
background-position:
top right, /* this positions the first image */
bottom left; /* this positions the second image */
background-repeat:
no-repeat; /* this applies to both images */
}Ver cómo background-position también tiene valores separados por comas? Aquellos se aplicarán individualmente a cada imagen respectivamente. Y luego como background-repeat tiene un solo valor? Podríamos haber hecho dos valores de la misma manera, pero usando solo un valor, se aplica a ambos.
Aquí hay un ejemplo que usa cuatro imágenes separadas, una en cada esquina, compensadas por una pizca:
Vea el ejemplo de lápiz de varios fondos de Chris Coyier (@chriscoyier) en CodePen.
Es una lástima que no pueda rotar o voltear imágenes de fondo o de lo contrario podríamos haber usado solo una. Sin embargo, podemos rotar y voltear elementos completos (o pseudo elementos), así que en casos como ese, ¡podemos usar una sola imagen!
Vea la imagen de giro del lápiz para que pueda usar solo una de Chris Coyier (@chriscoyier) en CodePen.
Solo algunas otras cosas a tener en cuenta aquí:
- El orden de apilamiento de varios fondos es “primero está arriba”.
- Los degradados se aplican a través de
background-image, por lo que se pueden utilizar como parte de todo esto. Por ejemplo, puede establecer un degradado transparente sobre una imagen ráster.
Vea la imagen teñida con lápiz con múltiples fondos de Chris Coyier (@chriscoyier) en CodePen.