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 julio de 2015.

* Some parts of this feature may have varying levels of support.

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

Pruébalo

background-image: url("/shared-assets/images/examples/lizard.png");

background-image:  url("/shared-assets/images/examples/lizard.png"),  url("/shared-assets/images/examples/star.png");

background-image:  url("/shared-assets/images/examples/star.png"),  url("/shared-assets/images/examples/lizard.png");

background-image:  linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),  url("/shared-assets/images/examples/lizard.png");

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

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.

Losbordes del elemento se dibujan encima de ellos y elbackground-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 CSSbackground-clip ybackground-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 valornone.

Nota:Incluso si las imágenes son opacas y el color no se mostrará en circunstancias normales, los desarrolladores web siempre deben especificar unbackground-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 clavenone 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("cat-front.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 admitenfondos 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 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>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

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>Este párrafo está lleno de gatos<br />y estrellas.</p>  <p>Este párrafo no.</p>  <p>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("star-transparent.gif"), url("cat-front.png");  background-color: transparent;}