Para acortar el código, también es posible especificar todas las propiedades de fondo en una propiedad única. Esto se llama propiedad abreviada.
En lugar de escribir:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Puede utilizar la propiedad abreviada fondo:
Utilice la propiedad abreviada para establecer las propiedades de fondo en una declaración:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
Cuando se utiliza la propiedad abreviada, el orden de los valores de las propiedades es:
color-de-fondo
imagen de fondo
repetición de fondo
archivo adjunto de fondo
posición-de-fondo
No importa si falta uno de los valores de propiedad, siempre y cuando el los demás están en este orden. Tenga en cuenta que no utilizamos la propiedad background-attachment en los ejemplos anteriores, ya que no tiene un valor.
Establece todas las propiedades de fondo en una declaración
Establece si una imagen de fondo es fija o se desplaza con el resto de la página.
Especifica el área de pintura del fondo.
Establece el color de fondo de un elemento.
Establece la imagen de fondo de un elemento.
Especifica dónde se ubican las imágenes de fondo.
Establece la posición inicial de una imagen de fondo.
Establece cómo se repetirá una imagen de fondo
Especifica el tamaño de las imágenes de fondo.