background

Resumo

A propriedade CSS background é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Background pode ser usado para definir os valores para um ou mais dos seguintes: background-clip, background-color, background-image (en-US), background-origin, background-position , background-repeat (en-US), background-size e background-attachment.

O fundo CSS propriedade estenográfica atribui valores dados explícitos e conjuntos de propriedades para seus valores iniciais em falta.

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Percentagesas each of the properties of the shorthand:
  • background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size: relative to the background positioning area
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Sintaxe

/ * Usando uma <cor-de-fundo> * /
background: green;

/ * Usando uma <imagem-de-fundo> e <estilo-de-repetição> * /
background: url("test.jpg") repeat-y;

/ * Usando uma <box> e <cor-de-fundo> * /
background: border-box red;

/ * Uma única imagem, centrado e escalado * /
background: no-repeat center/80% url( "../img/image.png");

Note: Nota: O background-color só pode ser definido no último fundo, como há apenas uma cor de fundo para todo o elemento.

Valores

Um ou mais dos seguintes, por qualquer ordem:

<anexo>

Veja background-attachment

<box>

Veja background-clip

<cor-de-fundo>

Veja background-color

<imagem-de-fundo>

Veja background-image (en-US)

<posição>

Veja background-position

<estilo-de-repetição>

Veja background-repeat (en-US)

<tamanho-do-fundo>

Veja background-size. Esta propriedade deve ser especificado após <posição> , separados com o caractere '/'.

Sintaxe formal

background = 
[ <bg-layer># , ]? <final-bg-layer>

<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>

<final-bg-layer> =
<'background-color'> ||
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>

<bg-image> =
<image> |
none

<bg-position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
[ <length-percentage [0,∞]> (en-US) | auto ]{1,2} |
cover |
contain

<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}

<attachment> =
scroll |
fixed |
local

<box> =
border-box |
padding-box |
content-box

<image> =
<url> |
<gradient> (en-US)

<length-percentage> =
<length> (en-US) |
<percentage> (en-US)

<url> =
url( <string> (en-US) <url-modifier>* ) |
src( <string> (en-US) <url-modifier>* )

Exemplos

HTML

<p class="Topbanner">
  céu estrelado<br/>
  Cintilando Cintilando<br/>
  Céu estrelado
</p>
<p class="atencao">Este é um parágrafo<p>

CSS

.atencao {
  background: red;
}

.Topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}

Resultado

Especificações

Especificação estado Comente
Unknown
The definition of 'fundo' in that specification.
Desconhecido A propriedade taquigráfica foi estendido para suportar múltiplas origens e a nova background-size, background-origem e background-clip propriedades.
CSS Level 2 (Revision 1)
The definition of 'background' in that specification.
Recomendação Não ocorreram alterações significativas
CSS Level 1
The definition of 'background' in that specification.
Recomendação definição inicial

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também