Atributo background-image CSS

Definición y uso

background-image El atributo establece una imagen de fondo para el elemento.

El fondo del elemento ocupa todo el tamaño del elemento, incluyendo el relleno y el borde, pero no la márgen.

Por defecto, la imagen de fondo se sitúa en la esquina superior izquierda del elemento y se repite en ambas direcciones.

Consejo:Establezca un color de fondo disponible, de modo que, si la imagen de fondo no está disponible, la página también tenga una buena apariencia visual.

Descripción detallada

El atributo background-image establece una imagen en el fondo del elemento.

De acuerdo con background-repeat el valor del atributo, la imagen puede repetirse infinitamente, extenderse a lo largo de un eje (eje x o eje y) o no extenderse.

La imagen de fondo inicial (imagen original) se sitúa según background-position Ubicación de los valores del atributo.

Véase también:

Tutoriales de CSS:Fondo de CSS、Fondo CSS (avanzado)、Degradado de CSS

Manual de referencia de HTML DOM:Atributo backgroundImage

Ejemplo

Establecer la imagen como fondo de la página:

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

Prueba tú mismo

Sintaxis de CSS

background-image: url|none|initial|inherit;

Valor del atributo

Valor del atributo

Valor Descripción
url('URL) Ruta a la imagen.
ninguna Valor por defecto. No se muestra la imagen de fondo.
inherit Se especifica que la propiedad background-image debe ser heredada del elemento padre.

Detalles técnicos

Valor por defecto: ninguna
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.backgroundImage="url(stars.gif)"

Compatibilidad del navegador

La tabla indica la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5