Como superponer textos e imágenes

Hay muchas formas de superponer un texto a una imagen. La más común es colocar la imagen como fondo de un bloque DIV. Si lo escribimos "normalmente", veríamos algo así:

Primera línea del texto
segunda línea del texto

<div style="background: transparent url(URL_imagen) no-repeat left top; height: 293px; margin: 0 auto; width: 400px;" />
  <h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; width: 240px;">
    Primera línea del texto<br />segunda línea del texto
  </h4>
</div>

Lógicamente, el texto estará arriba. Si quisieramos ubicarlo abajo o en un lugar específico, deberíamos agregarle al DIV la propiedad position: relative y al contenido la propiedad position: absolute. De este modo, utilizando left, right, top y bottom podremos ubicar ese texto en cualquier lugar dentro de la imagen:

Primera línea del texto
segunda línea del texto

<div style="position: relative;background: transparent url(URL_imagen) no-repeat left top; margin: 0 auto; height: 293px; width: 400px;" />
  <h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
    Primera línea del texto<br />segunda línea del texto
  </h4>
</div>

Lo mismo puede hacerse utilizando la imagen en una etiqueta IMG lo que además, permite que esta sea un enlace:

Primera línea del texto
segunda línea del texto

<div style="position: relative; margin: 0 auto;width: 400px;">
  <a href="URL"><img src="URL DE IMAGEN" /></a>
  <h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
    Primera línea del texto<br />segunda línea del texto
  </h4>
</div>

Compartir Enlace