background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A propriedade CSS background-color define a cor de fundo de um elemento.

Experimente

Sintaxe

css
/* Valores em chaves */
background-color: red;
background-color: indigo;

/* Valores em Hexadecimais */
background-color: #bbff00; /* Totalmente opaco */
background-color: #bf0; /* Forma abreviada totalmente opaco */
background-color: #11ffee00; /* Totalmente transparente */
background-color: #1fe0; /* Forma abreviada totalmente transparente */
background-color: #11ffeeff; /* Totalmente opaco */
background-color: #1fef; /* Forma abreviada totalmente opaco */

/* Valores em RGB */
background-color: rgb(255, 255, 128); /* Totalmente opaco */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparente */

/* Valores em HSL */
background-color: hsl(50, 33%, 25%); /* Totalmente opaco */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparente */

/* Valores em chaves especiais */
background-color: currentcolor;
background-color: transparent;

/* Valores globais */
background-color: inherit;
background-color: initial;
background-color: unset;

A propriedade background-color recebe um único valor <color>.

Valores

<color>

A cor uniforme de fundo. É renderizado atrás de qualquer background-image especificado, embora a cora ainda continue visible através de qualquer transparência da imagem.

Acessibilidade

É importante assegurar que o contraste entre a cor de fundo e a cor do texto colocado sobre ele é alta o suficiente para pessoas com condições de baixa visão possam ler o conteúdo da página.

A cor do contrast é determinada comparando a luminância da cor do texto e da cor de fundo. Para atender às atuais Diretrizes de Acessibilidade de Conteúdo da Web (WCAG), uma proporção de 4.5:1 é necessária para conteúdo de texto e 3:1 para textos maiores como títulos. Texto grande é definido como 18.66px e negrito ou maior, ou 24px ou maior.

Definição formal

Initial valuetransparent
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Computed valuecomputed color
Animation typea color

Sintaxe formal

background-color = 
<color>

Exemplos

HTML

html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exemplothree">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

Result

Especificações

Specification
CSS Backgrounds and Borders Module Level 3
# background-color

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também