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 (en-US) , 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 (en-US): 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 type (en-US)as each of the properties of the shorthand:

Sintaxe

css
/ * 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");

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 (en-US)

<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># (en-US)? (en-US) , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      || (en-US)
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)
  <repeat-style>                  || (en-US)
  <attachment>                    || (en-US)
  <visual-box>                    || (en-US)
  <visual-box>                    

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

<bg-image> = 
  <image>  | (en-US)
  none     

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

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

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

<attachment> = 
  scroll  | (en-US)
  fixed   | (en-US)
  local   

<visual-box> = 
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box   

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

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

<url> = 
  <url()>  | (en-US)
  <src()>  

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

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

Exemplos

HTML

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

CSS

css
.atencao {
  background: red;
}

.Topbanner {
  background: url("starsolid.gif") #00d repeat-y fixed;
}

Resultado

Especificações

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

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também