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

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

Exemplo

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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