Propiedad background-image

La propiedad background-image establece la imagen de fondo de un elemento. Por defecto, la imagen se repetirá con sus copias por todo el bloque, sin embargo, este comportamiento se puede desactivar con la propiedad background-repeat.

Sintaxis

selector {
	background-image: url(ruta a la imagen);
}

selector {
	background-image: none;
}

Valores

Valor	Descripción
`url`	Ruta al archivo con la imagen. El nombre de la imagen puede estar entre comillas dobles, comillas simples o sin comillas.
`none`	Desactiva la imagen de fondo para el elemento.

Valor por defecto: none.

Ejemplo

Establezcamos una imagen de fondo usando background-image, prohibiendo su repetición con la propiedad background-repeat:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Ejemplo

Sin background-repeat la imagen de fondo se repetirá por todo el bloque:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Ejemplo

Se puede establecer simultáneamente una imagen de fondo y un color de fondo usando background-color. En este caso, donde no haya imagen de fondo se verá el color de fondo:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Véase también

la propiedad background,
que es una propiedad abreviada para el fondo