Propriedade CSS background-color
Exemplo
Defina a cor de fundo de uma página:
body {background-color: coral;}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A background-colorpropriedade define a cor de fundo de um elemento.
O plano de fundo de um elemento é o tamanho total do elemento, incluindo preenchimento e borda (mas não a margem).
Dica: Use uma cor de fundo e uma cor de texto que facilite a leitura do texto.
| Valor padrão: | transparente |
|---|---|
| Herdado: | não |
| Animavel: | sim. Leia sobre animáveis |
| Versão: | CSS1 |
| Sintaxe JavaScript: | objeto .style.backgroundColor="#00FF00" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| background-color | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintaxe CSS
background-color: color|transparent|initial|inherit;
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| color | Specifies the background color. Look at CSS Color Values for a complete list of possible color values. | |
| transparent | Specifies that the background color should be transparent. This is default | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Especifique a cor de fundo com um valor HEX:
body {background-color: #92a8d1;}
Exemplo
Especifique a cor de fundo com um valor RGB:
body {background-color: rgb(201, 76, 76);}
Exemplo
Especifique a cor de fundo com um valor RGBA:
body {background-color: rgba(201, 76, 76, 0.3);}
Exemplo
Especifique a cor de fundo com um valor HSL:
body {background-color: hsl(89, 43%, 51%);}
Exemplo
Especifique a cor de fundo com um valor HSLA:
body {background-color: hsla(89, 43%, 51%, 0.3);}
Exemplo
Defina cores de fundo para diferentes elementos:
body {
background-color: #fefbd8;
}
h1 {
background-color: #80ced6;
}
div {
background-color: #d5f4e6;
}
span {
background-color: #f18973;
}
Páginas relacionadas
Tutorial de CSS: Fundo de CSS
Referência HTML DOM: propriedade backgroundColor