Propriedade Background
Propriedade Background
A propriedade "background" descreve como será o padrão de fundo de um elemento. O background pode ser constituído por uma cor, imagem ou os dois juntos. Pode ser definida também uma posição para a imagem, um padrão de repetição, se ela será fixa ou se acompanhará o rolamento da tela.
background-color
- Valor padrão: definido pelo browser
- Valores possíveis: nome da cor por exetenso, padrão hexadecimal ou RGB
- Aplicável a: todos os elementos
- Valores percentuais: N/a
Esta propriedade define a cor de fundo que o elemento terá.
body {background-color: black;}
background-image
- Valor padrão: none
- Aplicável a: todos os elementos
- background-image:
| none
Esta propriedade define uma imagem para o fundo do elemento. Quando da definição desta propriedade, pode-se também definir uma cor alternativa que será usada caso a imagem não seja encontrada. Quando a imagem é encontrada, ela se sobrepõe à cor de fundo.
body {background-image: none;}
p {background-image: url(imagem.gif);}
background-repeat
- Valor padrão: repeat
- Aplicável a: todos os elementos
- background-repeat: repeat | repeat-x | repeat-y | no-repeat
Esta propriedade define se a imagem de fundo será repetida e como ela será repetida.
p {
background-image: url(imagem.gif);
background-repeat: repeat-y;
}
background-attachment
- Valor padrão: scroll
- Aplicável a: todos os elementos
- background-attachment: scroll | fixed
Quando uma imagem de fundo é definida, o valor de 'background-attachment' determina se a imagem é fixa em relação à área de exibição ou se ela acompanhará o rolamento da tela.
p {
background-image: url(imagem.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Os browsers que não suportam o valor Fixed, tratarão esse valor como scroll.
background-position
- Valor padrão: 0 0
- Aplicável a: elementos em nível de bloco e elementos substituídos
- Valores percentuais: em relação ao tamanho do próprio elemento
- background-position: percentage | length| top | center | bottom || left | center | right
Quando a imagem de fundo foi especificada, esta propriedade define sua posição inicial.
O par de valores '0% 0%' indica que o canto superior esquerdo da imagem deve ser colocado no canto superior esquerdo do retângulo que contém o elemento em questão (exclui as áreas de espaçamento, bordas e margens). Já os valores '100% 100%' colocam o canto inferior direito da imagem no canto inferior direito do mesmo retângulo. Com os valores '14% 84%', o ponto da imagem que está 14% à direita do canto superior esquerdo, e 84% abaixo do mesmo, será colocado na posição correspondente do retângulo já mencionado.
Com um par de valores '20px 20px', o canto superior esquerdo da imagem é colocado 2px à direita e 2px abaixo do canto superior esquerdo do elemento considerado.
Se fornecido apenas um valor, será assumido que este valor corresponde à posição horizontal; o valor vertical será adotado como sendo 50%. Se existem dois valores definidos, o primeiro sempre indicará a posição horizontal. Combinações de percentagens com comprimentos são aceitas ('50% 20px'). Não são permitidos valores negativos.
Palavras-chave também podem ser usadas para indicar a posição da imagem de fundo, embora elas não possam ser combinadas com percentagens ou comprimentos. As palavras-chave aceitas, e suas interpretações, são as seguintes:
- 'top left' e 'left top' significam, ambas, o mesmo que '0% 0%';
- 'top', 'top center' e 'center top' significam '50% 0%';
- 'right top' e 'top right' indicam '100% 0%';
- 'left', 'left center' e 'center left' indicam '0% 50%';
- 'center' e 'center center' correspondem a '50% 50%';
- 'right', 'right center' e 'center right' significam '100% 50%';
- 'bottom left' e 'left bottom' indicam '0% 50%';
- 'bottom, 'bottom center' e 'center bottom' indicam '50% 100%';
- 'bottom right' e 'right bottom' indicam '100% 100%'.
Exemplos:
body { background: url(imagem.jpg) right top } /* 100% 0% */
body { background: url(imagem.jpg) top center } /* 50% 0% */
body { background: url(imagem.jpg) center } /* 50% 50% */
body { background: url(imagem.jpg) bottom } /* 50% 100% */
Se a imagem é fixa em relação ao ambiente de exibição (veja 'background-attachment' acima), ela é posicionada com relação a esse ambiente, e não ao elemento.
body {
background-image: url(imagem.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 100% 100%;
}
Neste exemplo, a imagem é posicionada no canto inferior direito do ambiente de exibição.
Background
- Valor padrão: não definido
- Aplicável a: todos os elementos
- Propriedade herdada: não
- Valores percentuais: permitidos para
- background: background-color || background-image || background-repeat || background-attachment || background-position
Você pode definir uma forma resumida de todas essas propriedades em apenas uma linha. Os valores permitidos estão indicados na descrição individual, dada acima, de cada propriedade 'background'.
body {
background:black url(imagem.gif) repeat fixed top left;
/* Na seqüencia -
background: color | image | repeat | attachment | position; */