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:
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 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> <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
<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
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
- Implementando sprites de imagen en CSS
<img>
- Tipos de datos relacionados con imágenes:
<image>
,<gradient>
- Funciones relacionadas con la imagen: