A backgroundpropriedade abreviada é uma maneira de especificar os valores de várias propriedades de plano de fundo CSS em uma única declaração.
Exemplo
body { background: url(photo.jpg) left top no-repeat #000; }
O exemplo acima especifica quatro propriedades de fundo em uma declaração e é o mesmo que escrever:
body { background-image: url(photo.jpg); background-position: left top; background-repeat: no-repeat; background-color: #000; }
Sintaxe
Aqui estão as oito propriedades de fundo para seu site que podem ser declaradas usando a backgroundpropriedade abreviada:
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
- background-color
A sintaxe geral da backgroundpropriedade é:
background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];
Cada valor de propriedade é separado por pelo menos um caractere de espaçamento. Ao especificar um background-sizevalor, ele deve seguir imediatamente o background-positionvalor.
Além disso, o background-positione background-sizedeve ter uma barra ( /) entre eles (por exemplo top right/contain). O conjunto de regras a seguir utiliza todas as oito propriedades em segundo plano usando a sintaxe longa:
body { background-image: url(photo.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: padding-box; background-clip: border-box; background-color: #ccc; }
(Quando usada, a regra de estilo acima resultará em uma imagem de fundo completa responsiva que cobre toda a janela de visualização.) A regra de estilo acima pode ser reduzida para apenas uma linha da seguinte forma:
body { background: url(photo.jpg) center center/cover no-repeat fixed padding-box border-box #ccc; }
E desde:
- padding-boxé o valor padrão debackground-origin
- border-boxé o valor padrão debackground-clip
A regra de estilo pode ser ainda mais reduzida omitindo esses dois valores de propriedade:
body { background: url(photo.jpg) center center/cover no-repeat fixed #ccc; }
Como pode ser visto acima, a backgroundsintaxe abreviada é útil para reduzir a quantidade de CSS que temos que escrever.
A sintaxe abreviada acima ocupa 272 bytes, enquanto a última sintaxe abreviada mostrada acima ocupa apenas 81 bytes, uma redução de código de -108,2%.
Comportamento
Aqui estão algumas coisas a serem lembradas ao usar a backgroundpropriedade abreviada.
Você tem que declarar todos os valores de propriedade em segundo plano?
Você não precisa declarar todos os oito valores de propriedade em segundo plano. No mínimo, você só precisa de um valor de propriedade válido.
Por exemplo, se você quiser apenas dar um fundo verde a um elemento, você pode escrever:
div { background: green; }
O que equivale a:
div { background-color: green; }
Como os valores de propriedade não declarados são tratados?
Um valor de propriedade de plano de fundo que não é especificado explicitamente na backgrounddeclaração de propriedade abreviada será igual ao seu valor padrão ou poderá herdar valores de suas outras regras de estilo. Por exemplo, a seguinte regra de estilo especifica apenas o valor para background-imagee background-repeat:
background: url(small-photo.jpg) no-repeat;
Assim, as outras seis propriedades que não são declaradas recebem seus valores padrão, de modo que o acima seja igual ao seguinte:
background: url(small-photo.jpg) no-repeat; /* The following properties are implicitly assigned their respective default values */ background-position: 0% 0%; background-size: auto; background-repeat: repeat; background-attachment: scroll; background-origin: padding-box; background-clip: border-box; background-color: transparent;
Nota: O exemplo acima assume que não há propriedades herdáveis de outros conjuntos de regras na folha de estilo. Se outros conjuntos de regras afetarem essas propriedades não especificadas, ele herdará esses valores de acordo com as regras de herança CSS.