Não entendi exatamente como funciona o background-position, o valor utilizado se aplica pra qual direção?
Não entendi exatamente como funciona o background-position, o valor utilizado se aplica pra qual direção?
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