Propriedade CSS background-position

A propriedade CSS background-position define a posição inicial de uma background-image dentro do seu elemento. Ela controla onde a imagem é ancorada — por exemplo, em um canto, centralizada ou deslocada a uma distância fixa de uma borda.

Esta página aborda as sintaxes de palavras-chave, porcentagem e comprimento, a diferença importante entre a forma como porcentagens e comprimentos são medidos, deslocamentos relativos a bordas (a sintaxe de quatro valores), o posicionamento de múltiplas imagens de fundo e os erros mais comuns.

Por padrão, o valor é 0% 0%, o que coloca a imagem no canto superior esquerdo do elemento. Se o fundo estiver configurado para repetir, ele se expande a partir desse ponto de ancoragem tanto horizontalmente quanto verticalmente.

Valor Inicial	0% 0%
Aplica-se a	Todos os elementos. Aplica-se também a ::first-letter e ::first-line.
Herdado	Não.
Animável	Sim. A posição pode ser alterada.
Versão	CSS1
Sintaxe DOM	object.style.backgroundPosition = "center";

Sintaxe

Sintaxe da propriedade CSS background-position

background-position: value;

Você pode fornecer um ou dois valores:

/* One value — the second axis defaults to center */
background-position: right;        /* same as: right center */

/* Two values — horizontal first, then vertical */
background-position: left top;
background-position: 50% 25%;
background-position: 20px 100px;

/* Four values — offset from a named edge */
background-position: right 20px bottom 10px;

Porcentagens vs. comprimentos

Este é o detalhe que mais confunde as pessoas. Uma porcentagem alinha o mesmo ponto percentual da imagem com aquele ponto do contêiner, enquanto um comprimento (px, em, etc.) mede o espaço entre os cantos superiores esquerdos.

background-position: 100% 100% coloca o canto inferior direito da imagem contra o canto inferior direito do contêiner — a imagem inteira permanece visível.
background-position: 50% 50% (o mesmo que center center) centraliza a imagem independentemente do seu tamanho.
background-position: 20px 0 simplesmente desloca a imagem 20px à direita do canto superior esquerdo; o deslocamento é independente do tamanho da imagem.

Portanto, porcentagens são melhores para "ancorar em uma borda ou centralizar" e comprimentos são melhores para "deslocar uma quantidade fixa".

Exemplo da propriedade background-position:

Exemplo da propriedade CSS background-position com valor padrão

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned at the left-top corner of the element.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade background-position especificada em porcentagem:

Exemplo da propriedade CSS background-position ao usar % (porcentagem)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 50% 15%;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 50% from the left side and 15% from the top side of the element.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade background-position em pixels:

Exemplo da propriedade CSS background-position ao usar px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: 5px 50px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>
      The background-image is positioned 5px from the left, and 50px down from the top.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade background-position com o valor "right 100px":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right 100px;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned 100px from the right edge, vertically centered.</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo da propriedade background-position com o valor "center center":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        padding: 102px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-attachment: fixed;
        background-position: center center;
      }
    </style>
  </head>
  <body>
    <h2>Background-position property example</h2>
    <p>The background-image is positioned center.</p>
  </body>
</html>

Experimente Você Mesmo »

Deslocamento a partir de uma borda específica

A sintaxe de três e quatro valores permite deslocar a imagem a partir de uma borda nomeada em vez do canto superior esquerdo. Cada comprimento segue a palavra-chave que nomeia a borda a partir da qual é medido:

/* 30px in from the right edge, 10px down from the top edge */
background-position: right 30px top 10px;

Isso é muito mais claro do que tentar expressar a mesma coisa com porcentagens, e mantém o deslocamento constante mesmo que o contêiner seja redimensionado. É suportado em todos os navegadores modernos (e Internet Explorer 9+).

Posicionamento de múltiplas imagens de fundo

Quando um elemento possui várias imagens de fundo, forneça a cada uma sua própria posição em uma lista separada por vírgulas. A ordem das posições corresponde à ordem das imagens:

.banner {
  background-image: url("logo.png"), url("pattern.png");
  background-repeat: no-repeat, repeat;
  background-position: right top, left top;
}

Aqui o logotipo fica no canto superior direito enquanto o padrão repetido começa no canto superior esquerdo.

Erros comuns

Ordem dos eixos errada. O primeiro valor é sempre horizontal, o segundo vertical — background-position: 30px 80px significa 30px a partir da esquerda, não do topo.
Esquecer background-repeat: no-repeat. Se a imagem se repete, a posição apenas define onde o primeiro bloco começa, então o efeito frequentemente é invisível.
Confundir porcentagens com comprimentos. 50% centraliza a imagem; 50px é um deslocamento fixo a partir do canto (veja a seção acima).
Misturar unidades em um par de valores é válido — background-position: center 20px é válido e útil.

Propriedades relacionadas

background-image — define a imagem que está sendo posicionada.
background-repeat — controla a repetição, que interage com o ponto de ancoragem.
background-size — dimensionar a imagem altera como as posições em porcentagem são resolvidas.
background-attachment — define se a imagem rola com a página ou permanece fixa.
background-color — a cor de fallback exibida onde a imagem não cobre.

Valores

Valor	Descrição	Experimente
`left`, `center`, `right`, `top`, `bottom`	Define a posição da background-image. Se apenas um valor for definido, o outro assume `center` como padrão.	Experimente »
`x% y%`	O primeiro valor define a posição horizontal e o segundo define a vertical. `0% 0%` é o canto superior esquerdo. `100% 100%` é o canto inferior direito. Se apenas um valor for definido, o outro assume `50%` como padrão.	Experimente »
`xpos ypos`	O primeiro valor define a posição horizontal e o segundo define a vertical. As unidades podem ser pixels (por exemplo, `0px 0px`).	Experimente »
`initial`	Define a propriedade com seu valor padrão.	Experimente »
`inherit`	Herda a propriedade do elemento pai.

Prática

Quais parâmetros podem ser usados na propriedade CSS background-position para especificar a posição da imagem de fundo?

PorcentagemPixelRemPalavras-chave (top, bottom, left, right, center)Valores de cor (hex, rgba, etc.)