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 a utilização da margem esquerda, margem direita, margem superior, e propriedades de margem de fundo. 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, a 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 a forma como a página é rolada).

Abra o arquivo SingleImage.CSS.

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 Amarelo-background-position: Centro-background-attachment: fixo}

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

A propriedade background-attachment define como essa imagem é anexado ao fundo do navegador. 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.

Salve o arquivo CSS como BackgroundPosition.CSS.

Video: Curso de CSS3 Aula 03 - Elementos de estrutura no CSS | Curso de HTML5 Aula 13

Abra o arquivo SingleImage.HTML.

modificar o tag para que ele se parece com isso:

Salve o arquivo HTML como BackgroundPosition.HTML.

Carregar a página BackgroundPosition.

Você vê o fundo. Note-se que a imagem inicial está agora centrada e as cópias irradiam para fora a partir dele.