Suprapune un text pe o imagine

Există multe modalităţi de a suprapunere text pe o imagine. Cele mai comune este de a plasa o imagine ca fundal intr-un bloc DIV. Cateva exemple se vad mai jos unde apare un text scris la inceputul imagini si in a doua imagine textul apare in partea de jos a imagini.Logic textul apare in prima imagine sus, pentru aplicarea lui jos trebuie adaugat in DIV proprietatea position: relative si la continul propietatea position: absolute.In acest mod folosind left, right, top si bottom se poate adauga textul in orice loc intr-o imagine.

---

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="background: url(URL_Imagine) no-repeat scroll left top transparent; height: 293px; margin: 0pt auto; width: 400px;">
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="position: relative; background: url(URL_Imagine) no-repeat scroll left top transparent; margin: 0pt auto; height: 293px; width: 400px;"><h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; position: absolute; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un alt exemplu mai simplu de a scrie un text pe o imagine gasesti aici