Fundos css
Explicando cor e imagem do fundo de um site
Embora podemos indicar, a cor e/ou fundo de um site diretamente com o código Html, vamos fazer na Folha de Estilos para evitar os problemas e aproveitar as vantagens que comentei na lição anterior. Assim vamos utilizar o arquivo estilos.css para definir as características das páginas web.
Cor do Fundo
A cor de fundo pré-estabelecida de uma página web é o branco. Quando quisermos outra cor teremos que indicá-la. O Body é o elemento no qual indicaremos para que tenha a cor escolhida por nós, como fizemos no último tema, pois engloba tudo “que se vê” no site. As cores são definidas por códigos (como por #E6E6FA). Deixo aqui um vínculo para uma: Tabela de Cores com seus códigos que pode ser de grande utilidade. Escolha uma que você goste (com código Html) para o fundo do site e seguimos...
Para colocar a cor desejada, abrir o Html-kit, ativar a janela Workspace, abrir a Folha de Estilos que fizemos anteriormente, escrever nela este código:
body {background-color: #E6E6FA}
Daqui para frente, quando escrever códigos css, farei na cor verde para diferenciar do código Html que está em roxo.
Guarde o arquivo estilos.css, abra o index.html e clic em “Preview”, verá como o fundo agora é da cor eleita. Legal, não? E comprovará que em nenhum momento tocamos no código html do index.html. Se no lugar de ter somente o index, tivéssemos 500 páginas aconteceria à mesma coisa, todas mudariam com retocar o arquivo estilos.css e em contra-partida senão usáramos a Folha de Estilos teríamos que mudar a cor do fundo nas 500 páginas, uma a uma, a mão!!..é um bom invento ou não? Pois ainda hoje por incrível que pareça existem webmasters que não sabem utilizá-lo... É claro!!! Essa gente gosta de trabalhar, vai lá garotãooo, trampa ai, trampa ai..kkkkkkkkkk.
Um pouco de estilos css
Aproveito agora e explico um pouco de css. Para dar propriedades aos elementos de um site, escreve-se na Folha de Estilos o nome da etiqueta e a continuação, entre chaves "{" e "}". Define-se cada propriedade que queremos dar mas separando cada uma com ponto e virgula ";". No nosso exemplo, a propriedade é para o corpo, escrevemos no “body” e entre chaves foi definida a propriedade que é: background-color (Background que significa fundo). Então background-color é usado para especificar a cor do fundo porém não somente para isso mas também de outros muitos elementos, como parágrafos, vínculos, etc... Esse número: #E6E6FA é o código que corresponde a uma das cores que aparecem na tabela de cores do enlace que eu deixei acima. Neste caso, como só foi definida uma propriedade, não é necessário colocar o ponto e vírgula. Parece estranho tudo isso??? Não se preocupe que logo, logo, isso tudo será familiar e fará com os olhos fechados... bom, com eles abertos sai muito melhor..rsrsrsrsrsrsrsrs.
Imagem do fundo
A imagen do fundo defini-se de forma similar a cor do fundo. Primeiro escolha uma imagem que você goste. Poderá escolher alguma em Imagens de fundo mas pode ser qualquer outra que tenha na mão. Quando já tenha decidido por uma, copiar e colar na pasta “objetos” (aquela que criamos antes, dentro da pasta “web-exemplo-css” que pode acessar no escritório em “minhas-paginas-web”) e uma vez copiada em “objetos”, mude o nome para “fundo.png”.
Supondo que você seguiu o explicado, foi colocado o nome de fundo.png e o código a inserir na Folha de Estilos seria este:
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) }
Repare como agora separamos a propriedade cor de fundo da propriedade imagem de fundo com um ponto de vírgula, tal e como comentei antes.
Explicando o Background-Image
Neste caso a propriedade chama: background-image. E serve para indicar o arquivo de imagem que vai ter o fundo do site. O lugar onde está o arquivo é escrito entre parênteses, como no código acima. Por determinação, isto é, se não definimos o contrário, esta imagem de fundo repetirá horizontalmente e verticalmente até ocupar todo o fundo da página, assim como um mosaico.
Pode ser feito com que não se repita, que se repita somente horizontalmente ou somente verticalmente, que não se repita e colocar no centro ou na parte de baixo ou no lado direito... Porém não é possível que somente saia uma vez e que se expanda até ocupar toda a página. Veremos agora estas opções.
Background-Repeat
Para que o fundo saía só uma vez, temos que determinar; na mesma linha da Folha de Estilos que não se repita, deste modo: background-repeat:no-repeat ficando assim o código :
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat:no-repeat }
Para que o fundo se repita somente horizontalmente, poremos: background-repeat:repeat-x
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat:repeat-x }
Para que se repita somente verticalmente escreveremos: background-repeat:repeat-y
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat:repeat-y }
Para que se repita verticalmente y horizontalmente não faz falta por nada, mas se você é dos explicadinhos, ponha assim: background-repeat:repeat
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat:repeat }
Existe outro valor possível que podemos dar. Trata do valor "inherit" que significa algo assim como fundo ancorado. Em teoria, embora movamos o site o fundo ficaria fixo e o movimento seria só do conteúdo, não o fundo. Isso sim, em teoria porque não funciona com todos os navegadores, tenha em conta se decide aplicar.
Background-Position
Também pode eleger o local que apareça o fundo, acima e centrado, embaixo e à direita e todas estas combinações com a propriedade background-position. Deixo um exemplo para que prove e veja como funciona:
body {background-color: #E6E6FA ; background-image: url(objetos/fundo.png) ; background-repeat: no-repeat ; background-position: left bottom}
Os valores que podem tomar são: top (acima), center (centro) e bottom (abaixo) para a alienação vertical; e left (esquerda) center (centro) e right (direita) para a alienação horizontal, de modo que poderá usar qualquer dessas combinações.
Também pode usar distancias, embora eu não recomende, indicando por exemplo que tome uma posição de 50 pixels desde o lado direito e 100 pixels desde acima, assim ficaria: background-position: 50px 100px. Um pixel é uma medida de distancia e que equivale a um pontinho do seu monitor. A imagem que vemos é formada por um conjunto desses pontinhos unidos. Para ter uma idéia, essas letras que você está lendo devem ter mais ou menos uns 11 pixels de largura cada letra. Uma página web normalmente tem uns 800 pixels de largura.
Background-Attachment
Existem também outros valores que eu não recomendo porque não funcionam em todos os navegadores então dependendo do que você utilizar conseguirá o efeito ou não, estes são: fixed e scroll. Faz com que a imagem de fundo fique fixa enquanto movimenta a página com a barra de rolagem ou que se mova com ela.
Nota:
Realmente, quando definimos uma imagem de fundo não é necessária à cor de fundo. Porém pode estar bem defini-la pois pode acontecer do arquivo de imagem não carregar, não vou citar aqui nenhum nome mas existem servidores que dão muitas falhas mas se estamos seguros que carrega normal sempre podemos eliminar a propriedade background-color da linha da Folha de Estilos, o que você acha? A não ser que a imagem não ocupe toda a página, ela tampará toda a cor do fundo. Agora se a imagem ocupar só uma parte ai sim pode ser interessante colocar uma cor para o fundo. Bom, isso já fica ao seu critério.
Relax
O presidente Lula chega a uma festa de aniversário para a qual tinha sido convidado.
Na portaria, percebeu que havia esquecido seus documentos. Mesmo assim, tentou entrar, mas foi barrado:
- Os documentos; senhor. Disse o segurança.
- Eu os esqueci...
- Então não pode entrar.
- Como assim? Eu sou o presidente da república! E, além disso, eu fui convidado!
- Bom, então o senhor vai ter que me provar que é mesmo o presidente.
- Como?
- Ainda há pouco, o Oscar passou por aqui com o mesmo problema do senhor e, para me provar que era mesmo o Oscar, jogou um basquete fenomenal aqui na minha frente... Depois foi o Pelé, que com uma bola no pé, fez maravilhas. Agora é a vez do senhor!
- Mas eu não sei fazer nada...
- Me convenceu, pode entrar.
Menu
