Propriedade background-position

A propriedade background-position define a posição da imagem de fundo de um elemento. A posição pode ser definida usando qualquer unidade de medida. O primeiro valor denota o deslocamento da esquerda, o segundo - o deslocamento do topo.

Também é possível definir a posição usando palavras-chave. Neste caso, a ordem dos valores não é importante. As palavras-chave para a vertical: top, center, bottom. As palavras-chave para a horizontal: left, center, right.

Como usar palavras-chave

Para posicionar a imagem usando palavras-chave, é necessário especificar um valor para a vertical e um para a horizontal. Por exemplo, se você especificar o valor top right, a imagem ficará no canto superior direito.

A ordem das palavras não importa: você pode escrever top right, ou pode escrever right top. Se houver a palavra-chave center - ela pode ser omitida. Por exemplo, top center é o mesmo que apenas top. E center center é o mesmo que apenas center.

Sintaxe

seletor {
	background-position: dois valores separados por espaço;
}

Exemplo

Por padrão, a imagem de fundo ficará no canto superior esquerdo:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo no canto superior direito:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo no canto inferior direito:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo à direita e centralizada verticalmente:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo no centro do bloco:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo a uma distância de 20px da esquerda e 40px do topo:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo a uma distância de 90% da esquerda e 100% do topo:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo a uma distância de 30px da esquerda e na parte inferior verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo a uma distância de 30px da esquerda e centralizada verticalmente:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Vamos posicionar a imagem de fundo a uma distância de 30px do topo e centralizada horizontalmente:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo