La background-imagepropiedad en CSS aplica un gráfico (por ejemplo, PNG, SVG, JPG.webp, GIF, WEBP) o degradado al fondo de un elemento.
Hay dos tipos diferentes de imágenes que puede incluir con CSS: imágenes regulares y degradados.
Imagenes
Usar una imagen sobre un fondo es bastante simple:
body ( background: url(sweettexture.jpg.webp); )El url()valor le permite proporcionar una ruta de archivo a cualquier imagen, y se mostrará como fondo para ese elemento.
También puede establecer un URI de datos para url(). Eso se ve así:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Esta técnica elimina una solicitud HTTP, lo cual es bueno. Pero hay una serie de desventajas, por lo que antes de comenzar a reemplazar todas sus imágenes, asegúrese de considerar todos los pros y los contras de los URI de datos.
También puede utilizar background-imagepara sprite imágenes, que es otro método útil para reducir las solicitudes HTTP.
Gradientes
Otra opción al usar fondos es decirle al navegador que cree un degradado. Aquí hay un ejemplo súper simple de un gradiente lineal:
body ( background: linear-gradient(black, white); )También puede utilizar degradados radiales:
body ( background: radial-gradient(circle, black, white); )Técnicamente hablando, los degradados son solo otra forma de imagen de fondo. La diferencia es que el navegador crea la imagen por ti. Aquí se explica cómo escribirlos: Sintaxis de degradado CSS3
El ejemplo anterior usa solo un degradado, pero también puede colocar varios degradados uno encima del otro. Hay algunos patrones bastante sorprendentes que puedes crear con esta técnica.
Establecer un color de respaldo
Si una imagen de fondo no se carga, o su fondo degradado se ve en un navegador que no admite degradados, el navegador buscará un color de fondo como alternativa. Puede especificar su color de respaldo de esta manera:
body ( background: url(sweettexture.jpg.webp) blue; )Varias imágenes de fondo
Puede utilizar varias imágenes, o una combinación de imágenes y degradados, para su fondo. Ahora se admiten varias imágenes de fondo (todos los navegadores modernos e IE9 + para imágenes gráficas, IE10 + para degradados).
Cuando utilice varias imágenes de fondo, tenga en cuenta que hay un orden de apilamiento algo contrario a la intuición. Enumere la imagen que debería estar al frente primero y la imagen que debería estar al final al final, así:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Cuando utiliza varias imágenes de fondo, a menudo necesitará establecer más valores para el fondo para que todo esté en el lugar correcto. Si desea utilizar la backgroundabreviatura, puede establecer los valores para cada imagen individualmente. Su taquigrafía se verá así (observe la coma que separa la primera imagen y sus valores de la segunda imagen y sus valores):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )No hay límite para la cantidad de imágenes de fondo que puede establecer y puede hacer cosas interesantes como animar sus imágenes de fondo. Hay un buen ejemplo de varias imágenes de fondo con animación en el blog de David Walsh.
Manifestación
Vea la imagen de fondo de Pen de CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
- adjunto de fondo
- clip de fondo
- color de fondo
- origen de fondo
- posición de fondo
- repetición de fondo
- tamaño de fondo
Más recursos
- La especificación CSS3
- MDN
- Imágenes de fondo de página completa perfectas
- Dominar los degradados CSS (Slidedeck)
Soporte del navegador
Las imágenes normales funcionan en todas partes y varias imágenes funcionan en los navegadores modernos e IE9 +. Aquí está el soporte para gradientes:
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |