Como posicionar gráficos em Sites CSS3

Em essência, a posição de gráficos em sites de CSS3 você usar a combinação da esquerda, direita, superior e propriedades de fundo para fornecer o posicionamento básico. Ajustando a posição envolve o uso da margem esquerda, margem direita, margin-top, e as propriedades margin-bottom. Para garantir que a imagem fica em um lugar, normalmente você define a propriedade posição de absoluto. Todos posicionamento é em relação ao tamanho da imagem, que você definir usando as propriedades de altura e largura.

imagens de fundo também tem a funcionalidade de posicionamento. Você também pode controlar o fundo posição da imagem, margem e tamanho. O procedimento a seguir fornece um exemplo de como você pode modificar o exemplo SingleImage para colocar uma única cópia da imagem no centro da página (e mantê-lo lá, não importa como a página é rolada).

1. Abra o arquivo SingleImage.CSS.

2. Modificar o estilo de corpo de modo que a imagem é fixada no centro, como mostrado aqui.

   body {background-image: url ( "CuteCat.jpg") - background-color: SaddleBrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px-background-position Amarelo: Centro-background-attachment : fixa}

   A propriedade fundo posição faz com que seja possível definir o posicionamento da cópia primária de uma imagem de fundo. A configuração padrão coloca a imagem no canto superior esquerdo, o que pode não ser muito agradável ao olho.

   A propriedade background-attachment define como a imagem está ligado ao fundo do browser. A definição deste valor fixo significa que a imagem permanece no mesmo local, mesmo quando o usuário redimensiona a exibição ou rola o conteúdo.

3. Salve o arquivo CSS como BackgroundPosition.CSS.

4. Abra o arquivo SingleImage.HTML.

5. modificar o tag para que ele se parece com isso:

6. Salve o arquivo HTML como BackgroundPosition.HTML.

7. Carregar a página BackgroundPosition.

   Você vê ao fundo. Observe que a imagem inicial está agora centrado e as cópias irradiam para fora dele.