Propiedad background

Ejemplos de uso

La propiedad background es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En concreto, background permite establecer simultáneamente las cinco propiedades relacionadas con el color e imagen de fondo de cada elemento.

Gracias a la propiedad background se puede establecer de forma directa el color de fondo (background-color), la imagen de fondo (background-image), su posición (background-position), si la imagen es fija o no (background-attachment) y/o si la imagen se repite o no (background-repeat). Puedes consultar la documentación de cada propiedad individual para acceder a sus ejemplos de uso.

En ocasiones, la propiedad background se utiliza simplemente para establecer el color de fondo de un elemento, ya que es más corto de escribir que la propiedad background-color. De esta forma, las dos reglas CSS siguientes producen el mismo efecto:

div {
  background-color: #CCC;
}

div {
  background: #CCC;
}

El uso habitual de la propiedad background es el de mostrar una imagen de fondo en un elemento y simultáneamente establecer las propiedades de esa imagen (si se repite o no, su posición y si es fija o no). Las dos reglas CSS siguientes son equivalentes, pero la segunda es mucho más compacta:

div {
  background-image: url("images/imagen_pequena.png");
  background-repeat: no-repeat;
  background-position: 2em 1.5cm;
  background-attachment: fixed;
}

div {
  background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fixed;
}

Como es habitual en las "propiedades shorthand", se puede establecer uno, varios o todos los valores permitidos:

div {
  background: url("images/imagen_pequena.png") no-repeat;
}

div {
  background: url("images/imagen_pequena.png") no-repeat fixed;
}

div {
  background: url("images/imagen_pequena.png") 10px 20px no-repeat;
}

div {
  background: url("images/imagen_pequena.png") top repeat-y scroll;
}

Como el orden de cada propiedad individual dentro de background es indiferente, todas las declaraciones CSS siguientes son correctas y equivalentes:

background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fixed;
background: fixed url("images/imagen_pequena.png") no-repeat 2em 1.5cm;
background: no-repeat fixed url("images/imagen_pequena.png") 2em 1.5cm;
background: 2em 1.5cm url("images/imagen_pequena.png") no-repeat fixed;
background: no-repeat 2em 1.5cm fixed url("images/imagen_pequena.png");
background: 2em 1.5cm url("images/imagen_pequena.png") fixed no-repeat;
background: no-repeat url("images/imagen_pequena.png") 2em 1.5cm fixed;
background: fixed 2em 1.5cm url("images/imagen_pequena.png") no-repeat;

Cuando se establece un color de fondo y una imagen de fondo a un mismo elemento, la imagen tiene prioridad. Por ello, el color sólo se ve en las zonas transparentes de la imagen y en las zonas del elemento que no están cubiertas por la imagen de fondo.

No obstante, es una buena práctica establecer un color de fondo siempre que se establezca una imagen de fondo. El motivo es que cuando los navegadores se descargan las imágenes de fondo, se pueden producir errores que impidan obtener la imagen.

Así, si se ha establecido un color de fondo similar a la imagen de fondo que no se puede mostrar, el usuario apenas notará la diferencia y el diseño de la página no sufrirá demasiado el error producido. Cuando la imagen de fondo es muy compleja y no se puede escoger un color similar, se recomienda establecer un color de fondo adecuado para leer el texto que pueda contener el elemento.