Posição de fundo - CSS-Tricks

Anonim

A background-positionpropriedade em CSS permite mover uma imagem de fundo (ou gradiente) dentro de seu contêiner.

html ( background-position: 100px 5px; )

Possui três tipos diferentes de valores:

  • Valores de comprimento (por exemplo 100px 5px)
  • Porcentagens (por exemplo 100% 5%)
  • Palavras-chave (por exemplo top right)

Os valores padrão são 0 0. Isso coloca sua imagem de plano de fundo no canto superior esquerdo do contêiner.

Os valores de comprimento são bastante simples: o primeiro valor é a posição horizontal, o segundo valor é a posição vertical. Portanto 100px 5px, moveremos a imagem 100px para a direita e cinco pixels para baixo. Você pode definir valores de comprimento em px, emou qualquer um dos outros valores de comprimento CSS.

As porcentagens funcionam de maneira um pouco diferente. Tire o chapéu da matemática: mover uma imagem de fundo em X% significa que ela alinhará o ponto X% na imagem com o ponto X% no contêiner. Por exemplo, 50%significa que ele irá alinhar o meio da imagem com o meio do contêiner. 100%significa que ele alinhará o último pixel da imagem com o último pixel do contêiner e assim por diante.

Palavras-chave são apenas atalhos para porcentagens. É mais fácil lembrar e escrever do top rightque 100% 0, e é por isso que as palavras-chave são uma coisa. Aqui está uma lista de todas as cinco palavras-chave e seus valores equivalentes:

  • top: 0% verticalmente
  • right: 100% horizontalmente
  • bottom: 100% verticalmente
  • left: 0% horizontalmente
  • center: 50% horizontalmente se horizontal ainda não estiver definido. Se for, então isso é aplicado verticalmente.

É interessante notar que não importa a ordem que você usa para as palavras-chave: top centeré igual a center top. Você só pode fazer isso se usar exclusivamente palavras-chave. center 10%não é o mesmo que 10% center.

Demo

Esta demonstração mostra exemplos de background-positionconjuntos com unidades de comprimento, porcentagens e palavras-chave.

Veja os valores da posição de fundo da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Declarando Valores

Você pode fornecer background-positionaté quatro valores em navegadores modernos (consulte a tabela de Suporte do navegador para obter detalhes).

Se você declarar um valor , esse valor será o deslocamento horizontal. O navegador define o deslocamento vertical como center.

Quando você declara dois valores , o primeiro valor é o deslocamento horizontal e o segundo valor é o deslocamento vertical.

As coisas ficam um pouco mais complicadas quando você começa a usar três ou quatro valores, mas também obtém mais controle sobre o posicionamento do plano de fundo.

Uma sintaxe de três ou quatro valores alterna entre palavras-chave e unidades de comprimento ou porcentagem. Você pode usar qualquer um dos valores de palavra-chave, exceto centerem uma background-positiondeclaração de três ou quatro valores .

Quando você especifica três valores , o navegador interpreta o quarto valor "ausente" como 0. Aqui está um exemplo de três valores background-position:

#threevalues ( background-position: right 45px bottom; )

Isso posiciona a imagem de plano de fundo 45px da direita e 0px da parte inferior do contêiner.

Aqui está um exemplo de quatro valores background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Isso coloca a imagem de plano de fundo 45px da direita e 20px da parte inferior do contêiner.

Observe a ordem dos valores nos exemplos acima: palavras-chave seguidas por unidades de comprimento. Um valor de três ou quatro background-positiondeve seguir esse formato, com uma palavra-chave precedendo um comprimento ou unidade de porcentagem.

Demo

Esta demonstração inclui exemplos de um valor, dois valores, três valores e quatro valores background-position.

Veja a sintaxe dos valores 1, 2, 3 e 4 da posição de fundo da caneta por CSS-Tricks (@ css-tricks) em CodePen.

Relacionado

  • anexo de fundo
  • clipe de fundo
  • cor de fundo
  • imagem de fundo
  • origem do fundo
  • fundo de repetição
  • tamanho do fundo

Mais recursos

  • background-position na especificação CSS3
  • background-position em MDN
  • Imagens de fundo deslocadas

Suporte para navegador

Os valores básicos são suportados em todos os lugares. A sintaxe de quatro valores tem este suporte:

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
25 13 9 12 7

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 7,0-7,1

Esse é o mesmo nível de suporte das propriedades background-position-xe background-position-y.