background-position

Resumo

background-position configura a posição inicial de qualquer imagem de fundo que seja configurada.

Valor inicial: 0% 0%
Aplica-se a: todos os elementos
Herdado: não
Porcentagens: refere-se ao tamanho da própria caixa
Mídia: visual
Valor computado: para <length> o valor absoluto, se não uma porcentagem

Sintaxe

background-position: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

Valores

<percentage> <percentage>: Com um par de valores de '0% 0%', o canto superior esquerdo da imagem é alinhado com o canto superior esquerdo do enchimento da borda da caixa. Um par de valores de '100% 100%' coloca o canto inferior direito da imagem no canto inferior direito da área de enchimento. Com um par de valores de '14% 84%', o ponto de 14% na horizontal e 84% na vertical da imagem é colocado no ponto 14% na horizontal e 84% na vertical da área de enchimento.
<length> <length>: Com um par de valores de '2cm 1cm', o canto superior esquerdo da imagem é colocado 2cm para a direita e 1cm abaixo do canto superior esquerdo da área de enchimento.
top left e left top: O mesmo que '0% 0%'.
top, top center e center top: O mesmo que '50% 0%'.
right top e top right: O mesmo que '100% 0%'.
left, left center e center left: O mesmo que '0% 50%'.
center e center center: O mesmo que '50% 50%'.
right, right center e center right: O mesmo que '100% 50%'.
bottom left e left bottom: O mesmo que '0% 100%'.
bottom, bottom center e center bottom: O mesmo que '50% 100%'.
bottom right e right bottom: O mesmo que '100% 100%'.

Se somente um valor é especificado, então ele configura a posição horizontal, com a posição vertical em 50%. Caso contrário, o primeiro valor especifica a posição horizontal. Combinações são permitidas de valores de palavras-chave, comprimento ou porcentagens, mas se palavras-chave forem misturadas com outros valores, 'left' e 'right' podem somente ser usados como o primeiro valor, e 'top' e 'down' podem somente ser usados como o segundo valor. Posições negativas são permitidas.

Exemplos

.exampleone {
	background-image: url("logo.png");
	background-position: top center;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background-image: url("logo.png");
	background-position: 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background-image: url("logo.png");
	background-position: 2cm 50%;
}

== Notas ==

Especificações

Compatibilidade com navegadores

Navegador	Versão mais antiga
Internet Explorer	4
Firefox	1
Netscape	6
Opera	3.5

Veja também

background, background-attachment, background-color, background-image, background-position, background-repeat

Categorias

Interwiki Language Links