background-image
================

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.

* MDN Entendiendo las WCAG, Directriz 1.1 explicaciones
* Comprender el Criterio de Conformidad 1.1.1 | W3C Entendiendo las WCAG 2.0
Definicion formal
-----------------

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | as specified, but with `url` values made absolute |
| Animation type | discrete |

Sytaxis formal
--------------
```

background-image =   
  <bg-image>#    
  
<bg-image> =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Implementando sprites de imagen en CSS (en-US)
* `<img>`
* Tipos de datos relacionados con imágenes: `<image>`, `<gradient>`
* Funciones relacionadas con la imagen:
    + `cross-fade()` (en-US)
    + `element()` (en-US)
    + `image()` (en-US)
    + `image-set()` (en-US)
    + `linear-gradient()` (en-US)
    + `radial-gradient()` (en-US)
    + `conic-gradient()` (en-US)
    + `repeating-linear-gradient()` (en-US)
    + `repeating-radial-gradient()` (en-US)
    + `repeating-conic-gradient()` (en-US)
    + `paint()` (en-US)
    + `url()`