Fundo de exemplo

Aplicando cor e imagem de fundo ao nosso exemplo

    Ups, creio que na lição anterior escrevi foi, é muuiittooo. Espero não ter assustado a ninguém...ah, ah, ah. O importante é lembrar que nesse tema existe informação para elaborar o fundo das páginas do site, se algum dia fazer falta. Agora aplicaremos uma cor de fundo ao site donosso exemplo.

Aplicando a cor de fundo

    Tal e como vimos antes, para aplicar a cor de fundo #E6E6FA no site, inserimos na etiqueta body de nossa Folha de Estilos o seguinte: (já sabe, abra o Html-kit, nele a Folha de Estilos e escreva a linha que aparece abaixo)

body {background-color: #E6E6FA}

Aplicando uma imagem de fundo

    Supondo que escolhemos esta imagem para o fundo do site (já sei, é horrível, mas para o exemplo serve):

(Para guardar, por o ponteiro do mouse sobre ela, clicar com o botão direto e escolher guardar como.. Logo guardar na pasta “objetos”.)

    E supondo que está guardada na pasta “objetos” e que a chamamos “fundo.png”, abriremos a Folha de Estilos e deixaremos a de linha antes assim:

body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) }

    Como não quero que se repita, poremos também:

body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat: no-repeat }

    E ainda quero que esteja no centro tanto na vertical como na horizontal, assim que colocaremos mais:

body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat: no-repeat ; background-position: center center}

Nota:

    Em outros navegadores não acontece nada porém no Firefox é necessário especificar a altura do body para que o fundo fique centralizado verticalmente. Para conseguir temos que indicar na linha do body que vai ter uma altura de 100%,  isto é, que vai ocupar o seu espaço que tem que ocupar. Uma chatice, já sei, mas senão o Firefox como é burrinho, ai que burrinho é...rsrsrsrs, não entende, de modo que colocamos e pronto:

body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-position: center center ; background-repeat: no-repeat ; height:100%; }

    Muitas vezes temos que buscar o macete para que vejamos o site bem em qualquer navegador e na maioria das vezes é um quebra-cabeça tremendo, mas você tem a sorte de contar com o comocriarseusite, ah, ah, ah...

    A página de exemplo, depois de guardar a Folha de Estilos, veríamos assim em qualquer navegador (espero...):

    E ai, galera? Mereceu a pena toda à lição anterior? Tentarei fazer mais ameno da próxima vez...

Anterior                                                            Acima                                                            Próximo

Relax