Escribir por encima de las imágenes

01/4/04 - En este taller de HTML vamos a aprender a colocar texto encima de una imagen, utilizando un pequeño truco con tablas.

Como el lector sabrá, las imágenes ocupan un espacio en la página que no se puede ocupar también con texto, es decir, si colocamos una imagen en un lugar, en principio, no se podría colocar texto ni otros elementos encima. Bueno, esto no es del todo cierto. Realmente se pueden utilizar capas para realizar esa tarea, pero el trabajo con capas siempre es complicado y puede llegar a dar problemas de compatibilidad con diferentes navegadores.

Este ejemplo puede ser útil para muchos casos. Por ejemplo, para jugar con fondos que tengan varios colores, o para escribir texto decorado con un bonito fondo de imagen que no tiene porque repetirse en toda la página.

Lo mejor es que visualicemos el efecto buscado en una página aparte.

El código de este ejemplo es el siguiente:

<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 es la huella de mi perrito.
<br>
<br>
Estoy muy contento de que se pasee de vez en cuando por este sitio web.
</font>
</td>
</tr>
</table>

Se trata de una tabla a la que le hemos colocado una imagen de fondo, utilizando el atributo background. Para que aparezca la imagen entera, la tabla se dimensiona al tamaño de la imagen. El texto que queremos escribir en el fondo de la imagen se coloca, tal cual, en la celda.

Otro ejemplo de imágenes de fondo en la tabla

Otro efecto que queda muy atractivo es crear una imagen con una trama de dos colores, que se puede utilizar de fondo, en la página o bien en una tabla.

Se puede ver el ejemplo aquí.

El código de la tabla sería el siguiente:

<table align=center width=700 cellpadding=3 cellspacing=2 background="trama.gif" bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Esto podría ser una barra de enlaces | Enlace 2 | Otro enlace | Termino con los enlaces
</font>
</td>
</tr>
</table>

Es un ejemplo muy simple y se consigue un efecto bastante elaborado. Si se embellece un poco más, se podría utilizar para una barra de navegación muy decente.

Nota: Es importante que el color de las tablas (atributo bgcolor) o las celdas donde coloques las imágenes de fondo (atributo background) sea lo más parecido al color predominante de la imagen. De este modo, se podrán ver perfectamente los textos que hayas escrito en la celda mientras se carga la imagen de fondo o, incluso, si no llega a cargarse por cualquier problema.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se ha encontrado un comentario sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba