Fundos de imagem em HTML

Explicamos asuntos relativos al uso de fondos de imagen en HTML y ofrecemos algún ejemplo ilustrativo.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 28/10/05
Valorize este artigo:
No presente workshop vamos tratar de explicar assuntos relativos ao uso de fundos de imagem em HTML. Indicaremos a maneira de utilizá-los corretamente, pois os fundos são capazes do pior e do melhor, ou seja, podem ser tão bonitos e atraentes como feios e incômodos, e claro, trata-se de ficarmos com a parte boa.

Colocar um fundo em uma página web

Para incluir um fundo em uma página web necessitamos utilizar o atributo background na etiqueta <BODY>, ao qual atribuímos o nome do arquivo que desejarmos utilizar como fundo. Se o arquivo se encontra em um diretório diferente da página web, necessitaremos incluir a rota do arquivo, tendo sempre em conta de utilizar uma rota relacionada ao arquivo .html para que se conserve a rota no caso de mudarmos o website de localização.

<body background="fundo.gif">

O que conseguimos com isto é que o arquivo fundo.gif se mostre na página como fundo. Por padrão, a imagem de fundo aparece como um mosaico, repetindo-se ao longo de todo o espaço da página.

Fundo em outros elementos

Não só a página pode ter um fundo, como também podemos colocar nas tabelas ou nas células, por exemplo. Utiliza-se o mesmo atributo background, embora aplicado a outras etiquetas.

<table background="fundo.gif">

<td background="fundo.gif">

Conselhos para utilizar fundos

Vejamos agora alguns conselhos que deveriam ser seguidos para uma correta utilização dos fundos de imagem.

1) Colocar um fundo de cor parecido à imagem
Quando colocamos um fundo em uma página devemos utilizar o atributo bgcolor para atribuir uma cor de fundo parecido ao predominante na imagem que compõe o mosaico. Possivelmente, muitos de nós já acessamos a uma página na qual não se via nada e, quando se carrega o fundo, nos damos conta que sim que havia texto na página, o que ocorre é que não se via porque não se contrastava com a cor de fundo branco por padrão. É possível que neste caso a imagem de fundo fosse escura e que o texto fosse branco e, até que não se carregue a imagem de fundo, não se pode ver nada. Este problema se agrava se o fundo não chega a se carregar por algum erro de transferência do arquivo ou porque a imagem foi apagada do servidor acidentalmente.

2) Que os textos possam ser bem lidos
Os fundos estão para tornar a página mais vistosa, e não para molestar na leitura dos textos. É um erro muito comum usar um fundo que logo molesta ao ler os textos. Já é bastante difícil ler uma web em um monitor como para ainda por cima ter um texto que não contraste bem com o fundo que está sendo utilizando. Neste caso cabe indicar também que é muito importante que as combinações de cor do texto e do fundo sejam agradáveis, já que há certas cores que, embora contrastem bem, provocam umas combinações difíceis de ler, por exemplo, um fundo com uma cor azul predominante e o texto em vermelho.

3) Os fundos de imagem de cor homogêneo
Se utilizarmos um fundo de imagem, temos que procurar fazer com que se utilize na imagem cores da mesma gama. Se a imagem tiver partes escuras e claras, que cor colocaremos o texto para termos a certeza de que se leia bem sempre? Se o texto é claro não contrastará bem com as partes do fundo que também são claras. Igual passará se colocarmos o texto com uma cor escura, que não contrastará bem com as partes escuras do fundo.

4) Ter cuidado com as distintas definições de tela
É importante saber que um visitante pode acessar a uma página com um tamanho de janela variável. Às vezes um fundo se comporta bem com uma definição dada, mas não com outras maiores. Ocorre muitas vezes que se utiliza um fundo e se vê o resultado em uma janela de 800x600 ou 1024x768. Logo acessa uma pessoa com uma definição de 1280x1024, ou superior, e vê a página incorretamente porque se realiza um mosaico com o fundo que o desenvolvedor não levou em conta. Para entender este ponto, pode ser interessante acessar a esta página, que se verá bem em uma definição de 800x600 porém, mal se for maior.

5) Fazer um fundo suficientemente grande
É importante que o tamanho do arquivo que vamos utilizar como fundo tenha um certo tamanho. Se utilizarmos como fundo uma imagem de poucos pixels, nosso computador trabalhará muito para criar o mosaico repetindo centenas ou milhares de vezes essa imagem. Entretanto, se o fundo tivesse sido um pouco maior, para realizar o mosaico teria trabalhado muito menos.

Definitivamente, teremos que ter muito cuidado ao utilizar os fundos, visto que podem dificultar muito, a apresentação da informação na página de uma maneira clara.

Se desejarmos utilizar um fundo que possa dar algum problema, uma idéia para certificarmos que os textos se visualizem corretamente é colocar todo o conteúdo da dentro de uma tabela e atribuir-lhe uma cor de fundo com o atributo bgcolor.

<html>
<head>
    <title>Fundo de prova</title>
</head>

<body background="fundo1.jpg" bgcolor="FFCECB">

<table width="550" bgcolor=FFCECB align=center>
<tr>
    <td>

    <h1 style="color:000000">Provando...</h1>
    <br>
    Este texto se lê bem porque tem um fundo plano.
    <br>

    </td>
</tr>
</table>

</body>
</html>


Pode-se ver o exemplo em funcionamento em uma página a parte.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato