background-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad CSS background-image establece una o más imágenes de fondo para un elemento.

Pruébalo

Las imágenes de fondo se dibujan apilando capas de contexto una encima de la otra. La primera capa especificada se dibuja como si estuviera más cerca del usuario.

Los bordes del elemento se dibujan encima de ellos y el background-color se dibuja debajo de ellos. La forma en que se dibujan las imágenes en relación con el cuadro y sus bordes se define mediante las propiedades CSS background-clip y background-origin.

Si no se puede dibujar una imagen específica (por ejemplo, cuando no se puede cargar el archivo indicado por el URI especificado), los navegadores lo manejan como si fuera un valor none.

Nota: Incluso si las imágenes son opacas y el color no se mostrará en circunstancias normales, los desarrolladores web siempre deben especificar un background-color. Si las imágenes no se pueden cargar, por ejemplo, cuando la red no funciona, el color de fondo se utilizará como alternativa.

Sintaxis

Cada imagen de fondo se especifica como la palabra clave none o como un valor <image>.

Para especificar varias imágenes de fondo, proporcione varios valores, separados por una coma:

css
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ),
  url("catfront.png");

/* Valores globales */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

Valores

none

Utilizado para especificar que un elemento no debe tener imagen de fondo.

<image>

Es un <image> que indica la imagen que se va a mostrar. Puede haber varios, separados por comas, ya que se admiten fondos múltiples.

Problemas de accesibilidad

Los navegadores no brindan ninguna información especial sobre imágenes de fondo a la tecnología de asistencia. Esto es importante principalmente para los lectores de pantalla, ya que un lector de pantalla no anunciará su presencia y, por lo tanto, no transmitirá nada a sus usuarios. Si la imagen contiene información crítica para comprender el propósito general de la página, es mejor describirla semánticamente en el documento.

Definicion formal

Valor inicialnone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Valor calculadoas specified, but with <url> values made absolute
Animation typediscrete

Sytaxis formal

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Ejemplos

Imagenes por capas

Tenga en cuenta que la imagen de la estrella es parcialmente transparente y se superpone a la imagen del gato.

HTML

html
<div>
  <p class="catsandstars">Este párrafo está lleno de gatos<br />y estrellas.</p>
  <p>Este párrafo no.</p>
  <p class="catsandstars">Aquí hay más gatos para ti.<br />¡Míralos!</p>
  <p>Y no mas.</p>
</div>

CSS

css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

Result

Especificaciones

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también