Propriedades Background
A propriedade background define as características do fundo dos elementos de uma página em HTML.
Se você examinar (ou reexaminar) o tutorial de N.º 6, intitulado "Sintaxe e Elementos das Regras CSS I", poderá conhecer/relembrar os elementos que compõem uma regra CSS, quais sejam:
seletor {
propriedade: valor;
}
Se vamos estudar a propriedade background, observando o conceito acima, temos de início a seguinte estrutura básica:
seletor {
background: valor;
}
A propriedade em estudo é utilizada com maior freqüência no seletor body, todavia, como se poderá constatar em estudos posteriores, ela poderá ser aproveitada em múltiplas situações, inclusive através de seletores combinados, que serão objeto de um estudo específico pela riqueza e importância do tema. Utilizaremos por agora, para fins exclusivamente didáticos, sua aplicação no seletor body.
Literalmente o termo de origem inglesa background quer dizer "lado de trás", fundos, o mesmo que verso. Vejamos quais são as especificidades de propriedade:
background-color: cor do fundo;
background-image: imagem de fundo;
background-repeat: maneira como a imagem de fundo é posicionada, como e se a imagem repete ou não;
background-attachment: se a imagem de fundo "rola" ou não com a tela;
background-position: como e onde a imagem de fundo é posicionada;
Apenas antecipando a resposta a uma eventual dúvida que possa lhe ter ocorrido, você pode utilizar a maneira abreviada background para todos os valores que as propriedades supracitadas comportam.
Exemplo:
<style type="text css">
body {
background: url ("caminho/imagem.png") repeat-x;
}
</style>
Veja como fica o exemplo com código abreviado
Vamos reescrever o código acima utilizando propriedades específicas:
<style type=text css>
body {
background-image: url ("caminho/imagem.png);
background-repeat: repeat-x;
}
</style>
Veja como fica o exemplo com código de propriedades background específicas.
Na maioria das vezes você usará a propriedade background para os seletores <body>, <div>, <p>, e < h> (1 a 6). Não deixe de considerar que os atributos HTML, background (body) e bgcolor (table, tr, td, th, body), estão em desuso segundo as recomendações pelo W3C.
A conclusão óbvia é de que a estilização e formatação devem ser feitas através de comandos CSS.
Vejamos agora as propriedades específicas de background.
background-color:
Pode assumir como valor:
a. Código em hexadecimal: #ffffff;
b. Código em RGB: (23, 128, 255);
c. Nome da cor em inglês: blue, red, yellow, green;
d. Valor transparente: transparent, que é o valor inicial da propriedade.
Recomendamos o uso de código hexadecimal na medida em que é hoje utilizado em larga escala em relação às outras formas de expressão de valor.
Exemplo:
<style type="text/css">
body {
background-color:#FF8000;
}
</style>
Veja como fica o exemplo de background-color.
Background-image:
Pode assumir como valor:
a. url: endereço da imagem;
b. none: nenhuma imagem;
c. inherit: um valor herdado;
Sugere-se que a utilização desta propriedade seja utilizada de forma concomitante com a propriedade background-color como forma de evitar que no caso de indisponibilidade acidental da imagem ou ainda em áreas que exibem imagens transparentes seja exibida a cor padrão do navegador respectivo, geralmente branco.
background-repeat:
Esta propriedade cuida da freqüência de exibição da imagem de fundo selecionada. O padrão é que na ausência da declaração em estudo, a imagem, caso não tenha a dimensão para preencher a integralidade da janela, se repita tantas vezes quanto necessário para preencher todo o espaço da área de exibição.
Pode assumir como valor:
a. no-repeat: não repete a imagem;
b. repeat: repete vertical e horizontal;
c. repeat-y: repete vertical;
d. repeat-x: repete horizontal;
Exemplo:
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
}
</style>
Veja um exemplo de background com uma imagem de dimensão 314px x 184px
Note que a ausência de uma declaração com a propriedade em estudo determina que a imagem se repita até preencher integramente a janela de exibição.
Como concebido, nem sempre a imagem selecionada possui a exata dimensão da janela de exibição, mesmo por que, as resoluções são distintas para cada usuário dependendo das configurações de vídeo, assim você pode definir comando para que a imagem se repita horizontalmente, verticalmente ou não se repita.
Veja os exemplos:
a. no-repeat: a imagem não se repete.
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
background-repeat:no-repeat ;
}
</style>
Veja o exemplo
c. repeat-y: a imagem se repete na vertical.
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
background-repeat:repeat-y;
}
</style>
Veja o exemplo
d. repeat-x: a imagem se repete na vertical.
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
background-repeat:repeat-x;
}
</style>
Veja o exemplo
background-attachment:
Esta propriedade define se a imagem de fundo ficará fixa na tela ou se ela "rolará" com a tela.
Pode assumir como valor:
a. scroll: a imagem de fundo acompanha a barra de rolagem;
b. fixed: a imagem de fundo é fixa;
a. scroll
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
background-repeat:repeat-x;
background-attachment:scroll;
}
</style>
Veja o exemplo
b. fixed
<style type="text/css">
body {
background-image:url('image/emprimeiro.jpg');
background-repeat:repeat-x;
background-attachment:fixed;
}
</style>
Veja o exemplo
background-position: esta propriedade define a posição inicial da imagem utilizada para o background. Veja a gama de possibilidades que você terá para posicionamento:
left: top, center e bottom;
center: top, center e bottom;
right: top, center e bottom.
Há também a possibilidade de posicionar a imagem de fundo utilizando porcentagem ou pixels, como abaixo exemplificado:
background-position: 50% 50%;
background-position: 50px 100px;
Sendo o posicionamento padrão 0 e 0 (left e top), temos grandezas definidas para o posicionamento horizontal e vertical respectivamente (eixos x e y).
No 1.º exemplo, definimos que a imagem terá "afastamento" de 50% da margem esquerda (portanto, referência horizontal) e 50% da margem do topo (portanto, referência vertical), nesta exata ordem: eixos x e y, respectivamente.
No segundo exemplo, definimos que a imagem se "afastará" 50px da margem esquerda (portanto, referência horizontal) e 100px da margem do topo (portanto, referência vertical), nesta exata ordem: eixos x e y, respectivamente.
Pois bem, por ora é isto. No próximo tutorial iremos abordar mais alguns interessantes aspectos e peculiaridades da propriedade "background". Até lá.
Publicado em: 10/03/2009 Última atualização: 10/03/2009