Característica background-image en CSS

La propiedad background-image CSS establece una o más imágenes como fondo del elemento. Las imágenes de fondo se colocarán una encima de la otra, dibujando la primera capa seleccionada como está más cerca del usuario. El marco del elemento se dibujarán border sobre las imágenes de fondo y el color especificado en la propiedad se colocará background-color debajo.

La relación entre las imágenes mostradas y el cuadro y el marco del elemento se especifica mediante las propiedades background-clip y background-originen CSS. Si la imagen especificada no se puede mostrar (por ejemplo: el navegador no pudo cargar la imagen desde su URL), el navegador asumirá que el valor es none.

Nota: Incluso si no hay transparencia en las imágenes utilizadas, y el color de fondo normalmente no se mostrará, pero se recomienda que los desarrolladores web especifiquen el color de fondo usando la propiedad background-color, si el navegador no puede cargar la imagen (por ejemplo) utilizará el color de fondo en lugar de la imagen.

Funciones background image en css

Valor inicial	`none`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especifica, pero con un valor de enlace `url` absoluto.

/* valor único */ 
background-image:  url ( 'bg-image.png' );

/* valores múltiples */ 
background-image:  url ( 'bg-image-1.png' ),  url ( 'bg-image-2.png' );

/* palabra reservada */ 
background-image:  none;

/* valores globales */  
background-image: inherit;
background-image: initial;
background-image: unset;

Ejemplos y aplicaciones

Fondo de página completa. Un ejemplo simple de configurar una imagen de fondo para un elemento <body> y especificar un color en caso de que el navegador no pueda mostrarlo por alguna razón:

body {
  background-image: url("bg-image.png");
  background-color: #cccccc;
}

Usar un degradado de color como fondo. Un ejemplo del uso de un degradado de color como imagen de fondo, y el degradado es lineal desde dorado ( gold) hasta verde amarillento ( greenyellow).

Código HTML:

< p  class = "gradient-bg" >
Contenido en texto
</ p >

Código CSS:

.gradient-bg {
  background-image: linear-gradient(#205a23, #28832c);
  color: white;
}

Usa más de una imagen como fondo de pantalla. Código CSS donde especificamos más de una imagen de fondo para el mismo elemento:

background-image: url(image-1.png), url(image-2.png);

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4.0	3,5	1.0
Imágenes SVG	8.0	4.0	9.0	9.5	5,0

Estructura general

Cada fondo se puede especificar mediante una palabra reservada none o mediante un tipo de datos <image>.

<image>

El valor indica la <image> imagen que se mostrará y se puede especificar más de una imagen separándolas con una coma (,).

Estructura formal

background-image: <bg-image>#;

dónde:

<bg-image> = none | <image>

Ver también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-origin, background-position, background-repeat, background-size y background-attachment.
Página de propiedades color para establecer el color del elemento.
Tonal <Gradiente>.
La página del artículo <img> que se utiliza para agregar imágenes.