Propriedade de fundo CSS
Exemplo
Defina diferentes propriedades de plano de fundo em uma declaração:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Definição e uso
A backgroundpropriedade é uma propriedade abreviada para:
- cor de fundo
- imagem de fundo
- posição de fundo
- tamanho de fundo
- fundo de repetição
- origem de fundo
- clipe de fundo
- anexo de fundo
Não importa se um dos valores acima está faltando, por exemplo background:#ff0000 url(smiley.gif); é permitido.
| Valor padrão: | ver propriedades individuais |
|---|---|
| Herdado: | não |
| Animavel: | sim, consulte propriedades individuais . Leia sobre animáveis |
| Versão: | CSS1 + novas propriedades em CSS3 |
| Sintaxe JavaScript: | object .style.background="url vermelho(smiley.gif) superior esquerdo sem repetição" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Observação: consulte o suporte individual do navegador para cada valor abaixo.
Sintaxe CSS
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Nota: Se uma das propriedades na declaração abreviada for a propriedade bg-size, você deve usar uma / (barra) para separá-la da propriedade bg-position, por exemplo, background:url(smiley.gif) 10px 20px/50px 50px ; resultará em uma imagem de fundo, posicionada a 10 pixels da esquerda, 20 pixels da parte superior, e o tamanho da imagem terá 50 pixels de largura e 50 pixels de altura.
Nota: Se estiver usando várias fontes de imagem de fundo, mas também quiser uma cor de fundo, o parâmetro background-color precisa ser o último da lista.
Valores de propriedade
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
Páginas relacionadas
Tutorial CSS: CSS Background , CSS Backgrounds (avançado)
Referência HTML DOM: propriedade background