Exemplo
Como posicionar uma imagem de fundo:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade background-position define a posição inicial de uma imagem de fundo.
Tip: Por padrão, uma imagem de fundo é colocado no canto superior esquerdo de um elemento, e repetiu tanto vertical como horizontalmente.
| Valor padrão: | 0% 0% |
|---|---|
| Herdado: | no |
| Animatable: | yes. Read about animatable Try it |
| Versão: | CSS1 |
| sintaxe JavaScript: | object .style.backgroundPosition="center" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Note: IE8 e anteriores não suportam várias imagens de fundo de um elemento.
CSS Syntax
background-position:value;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Se você especificar apenas uma palavra-chave, o outro valor será "center" | Jogue " |
| x% y% | O primeiro valor é a posição horizontal e o segundo valor é a vertical. O canto superior esquerdo é 0% 0%. O canto inferior direito é de 100% a 100%. Se você especificar apenas um valor, o outro valor será de 50%. . O valor padrão é: 0% 0% | Jogue " |
| xpos ypos | O primeiro valor é a posição horizontal e o segundo valor é a vertical. O canto superior esquerdo é 0 0. As unidades podem ser pixels (0px 0px) ou quaisquer outras unidades CSS . Se você especificar apenas um valor, o outro valor será de 50%. Você pode misturar% e posições | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Como posicionar uma imagem de fundo usando cento:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Tente você mesmo " Exemplo
Como posicionar uma imagem de fundo usando pixels:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Tente você mesmo " Páginas relacionadas
CSS tutorial: Background CSS
Referência CSS: background-image property
HTML DOM de referência: backgroundPosition property