Conhecendo o CSS - Posicionando a imagem de Fundo

Você pode posicionar uma imagem de fundo no documento ou qualquer elemento que quiser. Primeiramente deve-se definir as propriedades background-repeat com o valor no-repeat. Então você pode posicionar usando qualquer um dos valores descritos na tabela abaixo:

Obs.:Você pode combinar valores de porcentagem com os outros valores numéricos no background-position, com exceção de palavras. Assim pode-se ter valores como 80% 50px mas não como 100% left.
Se somente um valor de porcentagem ou comprimento for dado, ele será aplicado somente a posição horizontal, e a vertical ficará com seu valor padrão de 50%.

Exemplo:
h1 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 0% 0%;
      }

h2 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: 100px 4px;
     }

h3 {
       background-image: url(imagem_que_você_quer_usar.gif);
       backgroundrepeat: no-repeat;
       background-position: bottom right;
      }

Observe que nesse exemplo já ajustou-se não só a imagem, mas também o valor de norepeat para garantir que a posição da imagem de fundo e seus valores funcionem corretamente.

Posted in: