Abreviatura de fondo CSS

Atributo abreviado de background CSS

Si desea acortar el código, también puede especificar todas las propiedades de fondo en una sola propiedad. Esto se llama atributo abreviado.

en lugar de escribir:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Puede usar el atributo abreviado background:

Ejemplo

Establezca las propiedades de fondo en una declaración con el atributo abreviado:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

Pruebe usted mismo

Al usar el atributo abreviado, el orden de los valores de las propiedades es:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Si falta uno de los valores de la propiedad, no importa, siempre y cuando configure los otros valores en este orden. Tenga en cuenta que en el ejemplo anterior, no utilizamos la propiedad background-attachment, ya que no tiene valor.

Todas las propiedades de fondo CSS

Atributo Descripción
background Atributo abreviado que establece todas las propiedades de fondo en una declaración.
background-attachment Establece si la imagen de fondo es fija o se desplaza con el resto de la página.
background-clip Se especifica la área de dibujo del fondo.
background-color Establece el color de fondo del elemento.
background-image Establece la imagen de fondo del elemento.
background-origin Se especifica dónde se coloca la imagen de fondo.
background-position Establecer la posición de inicio de la imagen de fondo.
background-repeat Establecer si y cómo se repite la imagen de fondo.
background-size Especificar el tamaño de la imagen de fondo.