Como Fazer um Fundo de Paisagem

Olá, pessoal!

Nós costumávamos colocar um fundo com listras na diagonal, não é? Mas ensinarei como inserir e configurar um fundo de paisagem. Primeiro você terá que fazer um fundo com as seguintes dimensões:

1380 X 500 pixels

Com essas medidas, não terá importância o tamanho do monitor. O fundo ficará bom. Agora cabe a você escolher o que fazer. Você pode fazer uma paisagem com vários itens dos packs de design de Club Penguin. Há também paisagens já prontas neles. Enfim, isso é um escolha muito pessoal. Vamos para a última etapa.

Você poderá ajustar seu fundo de duas maneiras. A primeira é com ele fixo na tela. Ou seja, descendo ou não a página, ele continuará o mesmo.  Para colocar um fundo parado, vá em seu HTML e pesquise por background. Então vá passando as palavras encontradas até a terceira. Você verá algo mais ou menos assim:















Ponha o link da imagem de seu fundo dentro dos parênteses e apague tudo até o ponto e vírgula. Veja para não errar: 







Apague isso e insira o seguinte código no mesmo lugar (após os parênteses):
;
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;

Com esse código, seu fundo irá ficar fixo igual ao daqui. Para fazer um fundo que não seja fixo, clique em Mais informações:


Esse tipo dá um pouco mais de trabalho. Primeiro vamos inserir outro código do mesmo jeito e no mesmo lugar do fundo anterior. Insira esse código após os parênteses do link da imagem do fundo:
;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;

Feito isso falta somente definir a cor que a sua tela vai ficar após rolar toda a imagem do fundo. Para isso, abra a imagem do fundo no FireWorks. Crie um retângulo qualquer, clique para escolher a cor dele e vá com o conta-gotas no finalzinho inferior do fundo. Se não entendeu, veja:


Depois de selecionar a cor do devido lugar. Clique onde escolhe-se a cor do retângulo e copie o hexadecimal. Veja:


Agora vá no código do seu HTML e substitua o hexadecimal que está antes do link da imagem do fundo pelo seu hexadecimal. Assim:



Pronto! Deu um pouco de trabalho, mas valeu a pena. Seu fundo está feito. Salve e veja como ficou.

~Conrado_8

Nenhum comentário:

Postar um comentário