Propriedade de estilo de fundo

Definição e uso

background A propriedade é configurada ou retornada na forma abreviada para até oito propriedades de fundo individuais.

Através dessa propriedade, você pode definir/retornar uma ou várias das seguintes opções (em qualquer ordem):

Propriedade DOM Propriedade CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Essas propriedades também podem ser definidas usando atributos de estilo separados. Recomenda-se fortemente que os autores não avançados usem atributos separados para maior controle.

Veja também:

Tutorial do CSS3:Fundo CSS

Tutorial do CSS3:Fundo do CSS3

Manual de referência do CSS:Propriedade background

Exemplo

Defina o estilo do fundo do documento:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Experimente você mesmo

Mais exemplos TIY na parte inferior da página.

Sintaxe

Retorne a propriedade background:

object.style.background

Defina a propriedade background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Valor do atributo

Valor Descrição
color Defina a cor de fundo do elemento.
image Defina a imagem de fundo do elemento.
repeat Defina o modo de repetição da imagem de fundo.
attachment Defina se a imagem de fundo é fixa ou rola com a página.
position Defina a posição inicial da imagem de fundo.
size Defina o tamanho da imagem de fundo.
origin Defina a área de localização da imagem de fundo.
clip Defina a área de desenho da imagem de fundo.
initial Defina essa propriedade como seu valor padrão. Veja também initial.
inherit Herda essa propriedade do elemento pai. Veja também inherit.

Detalhes técnicos

Valor padrão: transparent none repeat scroll 0% 0% auto padding-box border-box
Retorno: String que representa o fundo do elemento.
Versão do CSS: CSS1 + novas propriedades no CSS3

Mais exemplos

Exemplo 2

Alterar o fundo do elemento DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Experimente você mesmo

Exemplo 3

Define a cor de fundo do documento:

document.body.style.backgroundColor = "red";

Experimente você mesmo

Exemplo 4

Define a imagem de fundo do documento:

document.body.style.backgroundImage = "url('img_tree.png')";

Experimente você mesmo

Exemplo 5

Define a imagem de fundo como não repetida:

document.body.style.backgroundRepeat = "repeat-y";

Experimente você mesmo

Exemplo 6

Define a imagem de fundo como fixa (não rola):

document.body.style.backgroundAttachment = "fixed";

Experimente você mesmo

Exemplo 7

Muda a posição da imagem de fundo:

document.body.style.backgroundPosition = "top right";

Experimente você mesmo

Exemplo 8

Retorna o valor do atributo de fundo do documento:

document.body.style.background;

Experimente você mesmo

Suporte do navegador

background É uma característica do CSS1 (1996).

Todos os navegadores suportam completamente ele:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Suporte Suporte Suporte Suporte Suporte Suporte

Comentários

O CSS3 (1999) adicionou três novos atributos: