background
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
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:
|
|---|---|
| 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:
|
| Computed value | as each of the properties of the shorthand:
|
| Animation type | 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><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> ||
<bg-clip> ||
<visual-box>
<final-bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<bg-clip> ||
<visual-box> ||
<'background-color'>
<bg-image> =
<image> |
none
<bg-position> =
<position> |
<position-three>
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
repeat-block |
repeat-inline |
<repetition>{1,2}
<attachment> =
scroll |
fixed |
local
<bg-clip> =
<visual-box> |
[ border-area || text ]
<visual-box> =
content-box |
padding-box |
border-box
<background-color> =
<color>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-three> =
[ left | center | right ] && [ [ top | bottom ] <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
<length-percentage> =
<length> |
<percentage>
<repetition> =
repeat |
space |
round |
no-repeat
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
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 # background |