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

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

cssselector {
  background-image: none;
}

Valores

Valor por defecto: none.

Ejemplo

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

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

css#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:

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

css#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:

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

css#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