Background-position e Background-attachment
O posicionamento e a forma de exibição do papel de parede são controlados pelas propriedades background-attachment e background-position. A primeira define se o fundo irá ou não se mover com o texto ou ficar fixo na tela. A segunda permite o posicionamento do fundo em um local exato da tela. Infelizmente essas duas propriedades não têm suporte uni-versal pelos browsers comerciais (apenas o Internet Explorer os suporta). Sintaxe:
background-attachment: fixed
background-attachment: scroll
Exemplo:
BODY {
background-image: url('/china.jpg');
background-attachment: fixed;
background-attachment: fixed;
}
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal
Exemplos:
BODY {
Sintaxe:
background-position: porcentagem_horiz% porcentagem_vert%
background-position: comprimento comprimento
background-position: posição_vertical posição_horizontal
Exemplos:
BODY {
background-image: url('/china.jpg');
background-repeat: no-repeat;
background-position: 50% 100%;
background-repeat: no-repeat;
background-position: 50% 100%;
}
BODY {
BODY {
background-image: url('/china.jpg');
background-repeat: no-repeat;
background-position: 25pt 2.5cm;
background-repeat: no-repeat;
background-position: 25pt 2.5cm;
}
BODY {
BODY {
background-image: url('/china.jpg');
background-repeat: no-repeat;
background-position: center top;
background-repeat: no-repeat;
background-position: center top;
}
BODY {
BODY {
background-image: url('/china.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-repeat: no-repeat;
background-position: left bottom;
}
Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens.
Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invisível" contra a margem direita do browser.
Os valores de comprimento, assim como os de porcentagem também são dados em pares. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do objeto; o segundo é a distância da margem superior. As unidades válidas são as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par.
Os valores de posição são palavras-chave usadas também aos pares. São equivalentes das porcentagens básicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).
Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens.
Um valor de 100% para o primeiro valor, empurra a margem direita (oposta) desta "caixa invisível" contra a margem direita do browser.
Os valores de comprimento, assim como os de porcentagem também são dados em pares. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do objeto; o segundo é a distância da margem superior. As unidades válidas são as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par.
Os valores de posição são palavras-chave usadas também aos pares. São equivalentes das porcentagens básicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).
| < Anterior | Próximo > |
|---|
