background

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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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, background-origin, background-position , background-repeat, 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`: `none` `background-position`: `0% 0%` `background-size`: `auto auto` `background-repeat`: `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`: 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`: as specified, but with `url` values made absolute `background-position`: as each of the properties of the shorthand: `background-position-x`: 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`: 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`: 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`: discrete `background-clip`: a repeatable list `background-position`: a repeatable list `background-size`: a repeatable list `background-repeat`: 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
<posição>: Veja background-position
<estilo-de-repetição>: Veja background-repeat
<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>                    ||
  <visual-box>                    ||
  <visual-box>                    

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

<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,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

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

<attachment> = 
  scroll  |
  fixed   |
  local   

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

<background-color> = 
  <color>  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

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

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

Sources: CSS Backgrounds and Borders Module Level 3, CSS Box Model Module Level 4, CSS Images Module Level 3, CSS Values and Units Module Level 4

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("star-solid.gif") #00d repeat-y fixed;
}

Resultado

Especificações

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