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 value | as each of the properties of the shorthand:* `background-image` (en-US): `none`
* `background-position` (en-US): `0% 0%`
* `background-size`: `auto auto`
* `background-repeat` (en-US): `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| Aplica-se a | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | não |
| Percentages | as 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 value | as each of the properties of the shorthand:* `background-image` (en-US): as specified, but with `url` (en-US) values made absolute
* `background-position` (en-US): as each of the properties of the shorthand:
    + `background-position-x` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    + `background-position-y` (en-US): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* `background-size`: as specified, but with relative lengths converted into absolute lengths
* `background-repeat` (en-US): a list, each item consisting of two keywords, one per dimension
* `background-origin`: as specified
* `background-clip`: as specified
* `background-attachment`: as specified
* `background-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `background-color`: a color
* `background-image` (en-US): discrete
* `background-clip`: a repeatable list
* `background-position` (en-US): a repeatable list
* `background-size`: a repeatable list
* `background-repeat` (en-US): discrete
* `background-attachment`: discrete
 |

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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `- moz-fundo-inline-política`
* Usando gradientes (en-US)
* Vários fundos