background-image

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.

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:

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;

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.

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

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>* )  

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

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

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

• Implementando sprites de imagen en CSS

• <img>

• Tipos de datos relacionados con imágenes: <image>, <gradient>

• Funciones relacionadas con la imagen:

  • cross-fade()
  • element()
  • image()
  • image-set()
  • linear-gradient()
  • radial-gradient()
  • conic-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • repeating-conic-gradient()
  • paint()
  • url()