Atributo background-position-x CSS

página anterior background-position
Próxima página background-position-y

Definição e uso

background-position-x A propriedade define a posição da imagem de fundo no eixo x.

Dica:Por padrão, a imagem de fundo é colocada no canto superior esquerdo do elemento e repetida nas direções vertical e horizontal.

Exemplo

Exemplo 1

Como posicionar a imagem de fundo no eixo x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

Experimente você mesmo

Exemplo 2

Como posicionar a imagem de fundo à direita:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Experimente você mesmo

Exemplo 3

Como usar a localização em porcentagem para a imagem de fundo:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

Experimente você mesmo

Exemplo 4

Como usar a localização de pixels para a imagem de fundo:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Experimente você mesmo

Exemplo 5

Crie uma imagem de fundo cobrindo o contêiner usando diferentes propriedades de fundo:

.hero-image {
  background-image: url("photographer.jpg"); /* Usado para a imagem */
  background-color: #cccccc; /* Se a imagem não estiver disponível, use essa cor */
  height: 300px; /* É necessário definir a altura */
  background-position-x: center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Não repita a imagem */
  background-size: cover; /* Ajusta o tamanho da imagem de fundo para cobrir todo o contêiner */
}

Experimente você mesmo

Sintaxe CSS

background-position-x: value;

Valor do atributo

Valor	Descrição
left	Localize o fundo no lado esquerdo do eixo x.
right	Localize o fundo no lado direito do eixo x.
center	Localize o fundo na centro do eixo x.
x%	O lado esquerdo do eixo x é 0%, e o lado direito é 100%. O percentual de valor é a largura da área de localização de fundo menos a largura da imagem de fundo.
xpos	É a distância horizontal do lado esquerdo. As unidades podem ser pixels (como 0px) ou outros Unidades CSS.
xpos deslocamento	Sintaxe de dois valores, suportada apenas no Firefox e Safari. xpos Defina como left ou right deslocamento É a distância horizontal da imagem de fundo com o valor de xpos definido no lado esquerdo ou direito As unidades podem ser pixels ou outros Unidades CSS.
initial	Defina essa propriedade para seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	0%
Herança:	Não
Produção de animação:	Suportado. Veja:Propriedades relacionadas a animação.
Versão:	CSS3
Sintaxe JavaScript:	object.style.backgroundPositionX="center"