Desde que o autor divulgou uma coleção de grandes web design de fundo, recebi muitos e -mails perguntando como usar o CSS para implementar grandes web design em segundo plano. Portanto, decidi compartilhar com você as habilidades de design do site em segundo plano. Neste tutorial, usarei alguns exemplos para ilustrar como usar uma ou duas imagens para implementar o design de um grande site em segundo plano.
Erros cometidos com frequência: fundo é cortado
Olhando para o arquivo de amostra, não há problema quando é menor que 1280 resolução. Mas se o seu monitor tiver uma resolução superior a 1280 pixels, você verá a parte fora da imagem em segundo plano.
Uma solução simples para o problema: defina a cor da borda da imagem na mesma cor que o plano de fundo da página da web. Aqui eu uso a parede da web designer como exemplo, observe a imagem abaixo e observe que as bordas da imagem são cores sólidas.
Parte css
Esta parte é simples, defina a imagem de fundo para o elemento corporal (localizado no centro, em cima)
Aqui está o código CSS:
| corpo { preenchimento: 0; margem: 0; Antecedentes: #f8f7e5 URL (wdw-bg.jpg) no topo central de repetição; largura: 100%; exibição: tabela; } |
Preste atenção ao fato de que existem duas linhas extras no seletor de corpo, para que a imagem de fundo mude quando a janela do navegador for menor que a largura do conteúdo, que aparecerá no Firefox.
