Propiedad CSS background-image
La propiedad CSS background-image establece una o más imágenes de fondo para un elemento, incluidas imágenes url() y degradados. Aprende la sintaxis y la superposición con ejemplos.
La propiedad CSS background-image establece una o más imágenes de fondo para un elemento. La imagen puede ser un archivo de imagen real referenciado con url(), o una imagen generada por CSS como un degradado.
De forma predeterminada, una imagen de fondo se coloca en la esquina superior izquierda del elemento y se repite en mosaico (horizontalmente y verticalmente) para llenar el espacio disponible. Puedes controlar ese comportamiento con las propiedades relacionadas background-repeat, background-position, background-size y background-attachment — o todo a la vez con la abreviatura background.
El área de pintado cubre el contenido del elemento, el box de padding y el de border, pero no el de margin. Puedes cambiar qué box se usa con background-clip y dónde comienza el posicionamiento con background-origin.
Cuándo usarlo
Usa background-image en lugar de un <img> en línea cuando la imagen es decorativa y no forma parte del contenido — fondos, texturas, secciones hero, degradados e iconos que no son parte del significado de la página. Dado que los fondos no son leídos por los lectores de pantalla, nunca pongas aquí imágenes que transmitan información; usa un <img> con texto alt para esos casos.
Algunas cosas que conviene saber de antemano:
- Combínalo siempre con un
background-colorcomo alternativa. Si la imagen no se carga (o todavía se está descargando), el color se muestra en su lugar y mantiene el texto legible. - Las imágenes múltiples se apilan. Cuando se listan varias imágenes separadas por comas, la primera se pinta encima y cada imagen siguiente queda detrás de ella.
- Los degradados también son imágenes.
linear-gradient()yradial-gradient()producen imágenes CSS, por lo que pertenecen abackground-image, no abackground-color.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | No. |
| Animatable | No. |
| Versión | CSS1 + algunos valores nuevos en CSS3 |
| Sintaxis DOM | object.style.backgroundImage = "url(img_tree.png)"; |
Sintaxis
Sintaxis de la propiedad CSS background-image
background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;Ejemplo de la propiedad background-image:
Ejemplo de la propiedad CSS background-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>Resultado
En el siguiente ejemplo se utilizan dos imágenes a la vez. Se superponen con background-position y background-repeat, y background-attachment: fixed las mantiene en su lugar mientras la página se desplaza.
Ejemplo de la propiedad background-image con otras propiedades de fondo:
Ejemplo de la propiedad CSS background-image con 2 imágenes
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
padding: 100px;
background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>The background image is positioned 5px from the left, and 50px down from the top.</p>
</body>
</html>Nótese la lista separada por comas: background-repeat: no-repeat, repeat aplica no-repeat a la primera imagen y repeat a la segunda, en el mismo orden en que se listan las imágenes. Esta asignación por imagen es la forma en que se configuran los múltiples fondos.
En el siguiente ejemplo, un linear-gradient() con dos paradas de color se usa como imagen de fondo para un elemento <div>. Dado que un degradado es una imagen, no se usa url():
Ejemplo de la propiedad background-image con el valor "linear-gradient":
Ejemplo de la propiedad CSS background-image con el valor linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9);
}
</style>
</head>
<body>
<h2>Linear gradient as a background image example</h2>
<p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
<div></div>
</body>
</html>Ejemplo de la propiedad background-image con el valor "repeating-radial-gradient":
Ejemplo de la propiedad CSS background-image con el valor repeating-radial-gradient
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Radial gradient as a background image example</h2>
<div></div>
</body>
</html>Errores comunes
- La imagen es invisible porque el elemento no tiene altura. Un fondo necesita un cuadro sobre el que pintarse. Un
<div>vacío colapsa a cero de altura, por lo que hay que asignarle unaheightexplícita (como en los ejemplos de degradados) o añadir algún contenido. - Un error
404en el fondo falla en silencio. A diferencia de<img>, unurl()roto no produce ningún error ni icono roto — el área simplemente permanece vacía (o muestra elbackground-color). Comprueba la ruta si no aparece nada. - Usa
background-color, nobackground-image, para un color sólido. Los degradados van enbackground-image; los colores planos pertenecen abackground-color. - ¿El mosaico se ve mal? Añade
background-repeat: no-repeaty dimensiona la imagen conbackground-size(por ejemplo,coverpara llenar el cuadro).
Valores
| Valor | Descripción |
|---|---|
| url | Define la URL de la imagen. Se puede especificar más de una imagen separada por comas. |
| none | No habrá ninguna imagen de fondo. Es el valor predeterminado. |
| linear-gradient | Se especifica un degradado lineal como imagen de fondo. |
| radial-gradient | Se especifica un degradado radial como imagen de fondo. |
| repeating-linear-gradient | Repite un degradado lineal. |
| repeating-radial-gradient | Repite un degradado radial. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |