Escribir por encima de las imágenes

  • Por
  • 01 de abril de 2004
  • Valoración:
  • 6 Comentarios
  • Taller HTML
Un par de sencillos ejemplos para constatar que esto es posible.
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

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Loka

26/2/2007
hola no se lo que es esto osea que ese no es mi E-mail...Si lo quereis llamar asi bueno que yo queria poner yo las fotos que queria y ponerle...Nose el chico que me mola o algo asin bueno chicos/as jajaja que me aburro mandarme un sms al msn yessi_paternera@hotmail.com!adew:)

katherina

15/10/2008
tr kiero mucho

jsce

31/12/2008
hola...
necesiitO ayuda
con mi myspace...
http://i446.photobucket.com/albums/qq183/jsce-mcr/Sanstitrea2.png entren en esa imagen...
lo qeu quiiero es escribir sobre la parthe donde de dice about me...
quisiera que me diieran un codiigo!:S para poder hacerlo por faavor!U.U


este es mi msn "jsce-mmk@hotmail.com"

Jose Donoso

17/9/2009
Gracias por el articulo
Excelente informacion. Clara y sencilla, y muy util por cierto.

kathy myers

11/12/2009
hola
feliz navidad para todos

julio

27/7/2010
hola
**El Amor es una simple ilusion, lo cual el ser humao no ha llegado a una conclusion. De paganos sentimientos que conyeban a la desilusion y traen consigo una mansion de recuerdos, haciendo una reflexcion trasladando su mente hacia otra dimension, en busca de una retroaccion de todos los momentos llenos de pasion, donde se acelera el corazon. Toda esta demostracion me lleva a una conclusion. *****EL AMOR ES UN RETRETE Y EL SENTIMIENTO ES EL INQUILINO QUE VIVE DENTRO******* Autor: PEDRO COHELO

Compartir