Neste workshop de HTML 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 melhor é visualizarmos o efeito buscado em uma página a parte.

O código deste exemplo é o seguinte:

<table border=1 bordercolor=black align=center width=159 cellpadding=3 cellspacing=2 background="huella.gif" height="146">
<tr>
<td>
<font size=2 face="arial,verdana">
<br>
Esta é a digital do meu cachorro.
<br>
<br>
Estou muito contente de que se passeie de vez em quando por este site.
</font>
</td>
</tr>
</table>

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.

Pode-se ver o exemplo aqui.

O código da tabela seria o seguinte:

<table align=center width=700 cellpadding=3 cellspacing=2 background="trama.gif" bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Isto poderia ser uma barra de links | Link 2 | Outro link | Termino com os links
</font>
</td>
</tr>
</table>

É 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.