Escrever por cima das imagens

Neste artigo vamos aprender a colocar texto em cima de uma imagem, utilizando um pequeno truque com tabelas.

Como o leitor saberá, as imagens ocupam um espaço na página que não pode ser ocupada com texto, ou seja, se colocarmos uma imagem em um lugar, à princípio, não poderia ser colocado nem texto nem outros elementos em cima. Bom, isto não é totalmente certo. Realmente, pode-se utilizar camadas para realizar essa tarefa, mas o trabalho com camadas sempre é complicado e pode chegar a dar problemas de compatibilidade com diferentes navegadores.

Este exemplo pode ser útil para muitos casos. Por exemplo, para lidar com fundos que tenham várias cores, ou para escrever texto decorado com um fundo bonito de imagem que não tem porque se repetir em toda a página.

O código deste exemplo é o seguinte:



Altere a imagem "huella.gif" para uma imagem sua qualquer.

Trata-se de uma tabela a qual colocamos uma imagem de fundo, utilizando o atributo background. Para que apareça a imagem inteira, a tabela se dimensiona ao tamanho da imagem. O texto que quisermos escrever no fundo da imagem se coloca, tal qual, na célula.

Outro exemplo de imagem de fundo na tabela

Outro efeito que fica muito atraente é criar ima imagem com uma trama de duas cores, que pode ser utilizada de fundo, na página ou então em uma tabela.

O código da tabela seria o seguinte:



Altere a imagem "trama.gif" para uma imagem sua qualquer.

É um exemplo muito simples e pode se conseguir um efeito bastante elaborado. Se embelezarmos um pouco mais, poderia ser utilizado para uma barra de navegação muito decente.

Observação: É importante que a cor das tabelas (atributo bgcolor) ou as células onde você for colocar as imagens de fundo (atributo background) seja o mais parecido à cor predominante da imagem. Deste modo, poderão ser vistos perfeitamente os textos que estiverem escritos na célula enquanto se carrega a imagem de fundo ou, inclusive, se chega a se carregar por qualquer problema.