Exemplo
Definir uma imagem de fundo para o <body> elemento:
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade background-image configura uma ou mais imagens de fundo para um elemento.
O pano de fundo de um elemento é o tamanho total do elemento, incluindo o preenchimento e borda (but not the margin) .
Por padrão, uma imagem de fundo é colocado no canto superior esquerdo de um elemento, e repetiu tanto vertical como horizontalmente.
Tip: Sempre dar um background-color para ser usado se a imagem não está disponível.
| Valor padrão: | none |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS1 + new values in CSS3 |
| sintaxe JavaScript: | object .style.backgroundImage="url(smiley.gif)" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Note: IE8 e anteriores não suportam várias imagens de fundo de um elemento.
CSS Syntax
background-image:url|none|initial|inherit;Valores de propriedade
| Valor | Descrição |
|---|---|
| url(' URL ') | A URL para a imagem. Para especificar mais de uma imagem, separe as URLs com uma vírgula |
| none | Nenhuma imagem de fundo será exibido. Este é o padrão |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Definir várias imagens de fundo para o <body> elemento:
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
Tente você mesmo " Páginas relacionadas
CSS tutorial: Background CSS
Tutorial CSS3: CSS3 Fundos
HTML DOM de referência: backgroundImage property