Propriedade do plano de fundo do estilo
Exemplo
Estilize o plano de fundo de um documento:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade de fundo define ou retorna até oito propriedades de fundo separadas, em uma forma abreviada.
Com esta propriedade, você pode definir/retornar um ou mais dos seguintes (em qualquer ordem):
- cor de fundo
- imagem de fundo
- fundo de repetição
- anexo de fundo
- posição de fundo
- tamanho de fundo
- origem de fundo
- clipe de fundo
As propriedades acima também podem ser definidas com propriedades de estilo separadas. O uso de propriedades separadas é altamente recomendado para autores não avançados para melhor controlabilidade.
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
Retorne a propriedade background:
object.style.background
Defina a propriedade de plano de fundo:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Valores de propriedade
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Detalhes técnicos
| Valor padrão: | transparente nenhum repetir rolagem 0% 0% auto padding-box border-box |
|---|---|
| Valor de retorno: | Uma String, representando o plano de fundo de um elemento |
| Versão CSS | CSS1 + novas propriedades em CSS3 |
Mais exemplos
Exemplo
Altere o plano de fundo de um elemento DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Exemplo
Defina uma cor de fundo para um documento:
document.body.style.backgroundColor = "red";
Exemplo
Defina uma imagem de fundo para um documento:
document.body.style.backgroundImage = "url('img_tree.png')";
Exemplo
Defina uma imagem de fundo para não repetir:
document.body.style.backgroundRepeat = "repeat-y";
Exemplo
Defina a imagem de fundo a ser corrigida (não rolará):
document.body.style.backgroundAttachment = "fixed";
Exemplo
Altere a posição de uma imagem de fundo:
document.body.style.backgroundPosition = "top right";
Exemplo
Retorne os valores de propriedade de plano de fundo de um documento:
document.body.style.background;
Páginas relacionadas
Tutorial de CSS: Fundo de CSS
Tutorial CSS3: Fundos CSS3
Referência CSS: propriedade background