1
resposta

[Dúvida] Como funciona o background-position?

Não entendi exatamente como funciona o background-position, o valor utilizado se aplica pra qual direção?

1 resposta

Olá João

Bem o background-position mexe na posição inicial da imagem, que por padrão é posicionada no topo da esquerda.

Você pode mexer nesse valor e posicionar a imagem de acordo com o seu gosto dentro do espaço das tags do body, div, section, etc.

Exemplo:

.imagem {
  background-image: url('suaimagem.png'); // define uma imagem de fundo
  background-repeat: no-repeat; // tira a repetição da imagem para preencher o fundo inteiro
  background-position: center; // centraliza a imagem dentro do espaço escolhido, por isso o center
}

tem diversas direções que você pode utilizar como: right, left, center, right top, e por ai vai...

Depois você pode ate conferir utilizando a ferramenta de inspecionar elementos como a imagem está sendo ocupada ou trocando os valores. Aqui no developer mozilla tem alguns exemplos de uso dessa propriedade CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position