Exemplo
Definir diferentes propriedades do fundo em uma declaração:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Tente você mesmo " Definição e Uso
O fundo propriedade estenográfica define todas as propriedades do fundo em uma declaração.
As propriedades que podem ser definidas são: background-color, background-image, background-position, fundo-size, background-repeat, background-origem, background-clip, e background-attachment.
Não importa se um dos valores acima estiver faltando, por exemplo, background: # ff0000 url(smiley.gif) ; é permitido.
| Valor padrão: | see individual properties |
|---|---|
| Herdado: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Versão: | CSS1 + new properties in CSS3 |
| sintaxe JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Note: Internet Explorer 8 e versões anteriores não suportam várias imagens de fundo de um elemento.
Nota: Consulte o suporte ao navegador individual para cada valor abaixo.
CSS Syntax
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 é propriedade bg-size, você deve usar a / (slash) para separar a propriedade bg-posição, por exemplo, background:url(smiley.gif) 10px 20px / 50px 50px ; irá resultar em uma imagem de fundo, posicionada 10 pixels a partir da esquerda, 20 pixels a partir do topo, eo tamanho da imagem será de 50 pixels de largura e 50 pixels de altura.
Nota: Se utilizar múltiplas fontes de imagem de fundo, mas também quer um background-color, o parâmetro background-color precisa estar no fim da lista.
Valores de propriedade
| Valor | Descrição | CSS |
|---|---|---|
| background-color | Especifica a cor de fundo a ser usado | 1 |
| background-image | Especifica uma ou mais imagens de fundo para ser usado | 1 |
| background-position | Especifica a posição das imagens de fundo | 1 |
| background-size | Especifica o tamanho das imagens de fundo | 3 |
| background-repeat | Especifica como repetir as imagens de fundo | 1 |
| background-origin | Especifica a área de posicionamento das imagens de fundo | 3 |
| background-clip | Especifica a área de pintura das imagens de fundo | 3 |
| background-attachment | Especifica se as imagens de fundo são fixas ou pergaminhos com o resto da página | 1 |
| inicial | Define essa propriedade para o valor padrão. Leia sobre inicial | 3 |
| herdar | Herda essa propriedade do seu elemento pai. Leia sobre herdar | 2 |
Páginas relacionadas
CSS tutorial: Background CSS
Tutorial CSS3: CSS3 Fundos
Referência HTML DOM: background property