background

Esta tradução está incompleta. Ajude atraduzir este artigo.

Resumo

O fundo propriedade CSS é um atalho para definir os valores de fundo individuais em um único lugar na folha de estilo. Fundo 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 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
Midiavisual
Computed valueas each of the properties of the shorthand:
  • background-image: as specified, but with URIs made absolute
  • background-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
  • 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: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

/ * Usando um <cor-de-fundo> * /
background: geen;

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

/ * Usando um <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

[ <bg-layer> , ]* <final-bg-layer>

where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

where
<bg-image> = none | <image>
<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> | 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

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?

Exemplos

HTML

<p class="Topbanner">
  céu estrelado<br/>
  Cintilando Cintilando<br/>
  Céu estrelado
</p>
<p class="warning">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.
Unknown A propriedade estenográ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.
Recommendation Não ocorreram alterações significativas
CSS Level 1
The definition of 'background' in that specification.
Recommendation definição inicial

Compatibilidade do navegador

Característica Firefox (Gecko) cromada Internet Explorer Ópera Safári
Suporte básico 1.0 (1.7 or earlier) 1.0 4.0 3,5 1.0
Vários fundos 3.6 (1.9.2) 1.0 9 10.5 1.3
Imagem SVG como pano de fundo 4.0 (2.0) 31,0 9 21,0 5.1
Suporte para background-size Unknown (18,0) 21,0 9 21,0 6.1
Suporte para background-origem e background-clip Unknown (22,0) 31,0 9 21,0 5.1
Característica Firefox Mobile (Gecko) andróide IE Telefone Opera mobile Safari móvel
Suporte básico 1.0 (1.9.2) 2.1 10.0 5 3.2
Vários fundos 1.0 (1.9.2) 2.1 10.0 5 3.2
Imagem SVG como pano de fundo 4.0 (2.0) 3.0 10.0 ? 4.2
Suporte para background-size 18,0.0 (18,0) 3.0 10.0 (Yes) 4.0
Suporte para background-origem e background-clip 22,0.0 (22,0) 3.0 10.0 Não suportado 4.0

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: macalha, luanmuniz, joaogsantos
 Última atualização por: macalha,