A capacidade de esticar a imagem de fundo para a largura total da janela do navegador usando CSS só apareceu com o lançamento de sua especificação mais recente - CSS3. Infelizmente, até agora, um grande número de surfistas da web está usando os primeiros navegadores que não entendem a especificação CSS3. Portanto, você deve fazer uma escolha - usar uma solução menos conveniente, mas para vários navegadores, ou uma solução de alta tecnologia, mas para um público limitado. Vamos considerar as duas opções.
Necessário
Conhecimento básico de HTML e CSS
Instruções
Passo 1
A primeira opção é baseada em especificações anteriores da linguagem CSS. Você precisa criar uma estrutura de código HTML que tenha duas camadas sobrepostas, uma acima da outra. As camadas (div) podem ser estendidas para a largura da tela na antiga especificação de linguagem de descrição do estilo em cascata. Na parte inferior das camadas você precisa colocar a imagem de fundo, e na superior colocará todo o conteúdo da página. Essa estrutura no corpo do documento pode ter a seguinte aparência:
Este será o conteúdo da página
E a descrição dos estilos para esta estrutura deve ser colocada na parte do cabeçalho. Por exemplo, este:
html, body {
margem: 0px;
altura: 100%;
}
#fundo {
posição: absoluta;
largura: 100%;
altura: 100%;
}
#corpo {
posição: absoluta;
largura: 100%;
altura: 100%;
índice z: 2;
}
Aqui, as camadas com fundo de IDs (esta é sua imagem de fundo) e corpo (esta é a camada para o conteúdo da página) são definidas para posicionamento absoluto e 100% de largura e altura. Além disso, é atribuído à camada de conteúdo um número de série índice z = 2. Ele determina a "profundidade" das camadas - quanto maior, mais distante do "fundo" essa camada está localizada. Em nosso caso, ele estará acima da camada de fundo, que usa o índice z padrão.
Passo 2
O código completo pode ser assim:
html, body {
margem: 0px;
altura: 100%;
}
#fundo {
posição: absoluta;
largura: 100%;
altura: 100%;
}
#corpo {
posição: absoluta;
largura: 100%;
altura: 100%;
índice z: 2;
}
Este será o conteúdo da página
Não se esqueça de substituir o nome do arquivo de imagem de fundo fon.png.
etapa 3
A segunda opção usará a propriedade background-size introduzida no CSS3. Ao mesmo tempo, adicione propriedades semelhantes às definições de estilo que eram usadas anteriormente pelos navegadores Mozilla Firefox, Google Chrome e Opera. O bloco de descrição do estilo nesta versão pode ser parecido com este:
html {
plano de fundo: url (fon.png) centro sem repetição fixo; centro fixo;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
tamanho do fundo: capa;
}
E aqui não se esqueça de substituir o nome do arquivo de imagem de fundo fon.png. E no corpo do próprio documento, nenhuma construção especial é necessária nesta versão.
