Para encurtar o código, também é possível especificar todas as propriedades de fundo em um única propriedade. Isso é chamado de propriedade abreviada.
Em vez de escrever:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Você pode usar a propriedade abreviada background:
Use a propriedade abreviada para definir as propriedades do plano de fundo em um declaração:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Experimente você mesmo →
<!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>
Ao usar a propriedade abreviada, a ordem dos valores da propriedade é:
cor de fundo
imagem de fundo
repetição em segundo plano
anexo de plano de fundo
posição de fundo
Não importa se um dos valores da propriedade está faltando, desde que o outros estão nesta ordem. Observe que não usamos a propriedade background-attachment nos exemplos acima, pois ela não possui valor.
Define todas as propriedades de fundo em uma declaração
Define se uma imagem de fundo é fixa ou rola com o resto da página
Especifica a área de pintura do plano de fundo
Define a cor de fundo de um elemento
Define a imagem de fundo de um elemento
Especifica onde as imagens de fundo estão posicionadas
Define a posição inicial de uma imagem de fundo
Define como uma imagem de fundo será repetida
Especifica o tamanho da(s) imagem(s) de fundo