As propriedades background e background-color são as mesmas?
As propriedades background e background-color são as mesmas?
Oi, Ricardo.
Não, a propriedade background é uma shorthand property. Ou seja, é uma propriedade que permite escrever múltiplas propriedades de uma vez só. Por exemplo, tenho o seguinte código:
.header {
background-image: url('fundo.jpg');
background-color: #000;
background-position: center top;
background-repeat: no-repeat;
}
Graças à propriedade background, o mesmo código pode ser escrito de forma resumida:
.header {
background: url('fundo.jpg') #000 center top no-repeat;
}
Ao passo que background-color aceita somente um valor para a cor.
No entanto, você pode utilizar as duas propriedades para atribuir uma cor de fundo. Veja:
/* Funciona */
.header {
background-color: tomato;
}
.header {
/* Também funciona */
.header {
background: tomato;
}
Links interessantes: - MDN - CSS Tricks