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 value	as each of the properties of the shorthand: background-image (en-US): `none` `background-position`: `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`: 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`: 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`: discrete `background-position`: repeatable list of simple list of length, percentage, or calc `background-size`: repeatable list of simple list of length, percentage, or calc background-repeat (en-US): discrete `background-attachment`: discrete

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");

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> (en-US)           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<gradient> = 
  <linear-gradient()>            |
  <repeating-linear-gradient()> (en-US)  |
  <radial-gradient()>            |
  <repeating-radial-gradient()> (en-US)  

<image-tags> = 
  ltr  |
  rtl  

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

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<image-set-option> = 
  [ <image> | <string> (en-US) ] [ <resolution> (en-US) || type( <string> (en-US) ) ]  

<cf-image> = 
  <percentage> (en-US)?          &&
  [ <image> | <color> ]  

<id-selector> = 
  <hash-token>  

<linear-gradient()> = 
  linear-gradient( [ <angle> (en-US) | to <side-or-corner> ]? , <color-stop-list> )  

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  

<position> = 
  [ left | center | right | top | bottom | start | end | <length-percentage> ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]  |
  [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]  

<rgb()> = 
  rgb( [ <percentage> (en-US) | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> (en-US) | none ] [ <percentage> (en-US) | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> (en-US) | <number> | none ] [ <percentage> (en-US) | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage> (en-US)  

<alpha-value> = 
  <number>      |
  <percentage> (en-US)  

<linear-color-stop> = 
  <color>               &&
  <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<hue> = 
  <number>  |
  <angle> (en-US)   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> (en-US) | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65

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