Penso che la prima cosa che tu debba fare è mettere la tua immagine come sfondo in questo modo potrai inserire degli elementi come scritte ed immagini sopra di essa.
(Risposta troppo banale?)
Il codice dovrebbe venire una cosa del genere (si tratta solo di un esempio i numeri li ho messi a caso)
codice:
<html>
<head>
...
<style type="text/css">
#contenitore { weight:1342px;height:2000px; background-image:url('nome_immagine.jpg'); }
#primo_riquadro{ weight:1342px;height:20px;}
#secondo_riquadro{ weight:900px;height:200px;float:left;}
#terzo_riquadro{ weight:442px;height:300px;float:left;}
</style>
</head>
<body>
<div id="contenitore">
<div id="primo_riquadro">scritta 1</div>
<div id="secondo_riquadro">scritta 2</div>
<div id="terzo_riquadro">scritta 3</div>
....
</div>
</body>
</html>
Questo ovviamente hai creato la tua immagine con le giuste dimensioni,
perché se vuoi che i riquadri si allunghino o accorciano in base al contenuto la cosa si complica un po'...
...dovrai separare la tua immagine in tante più piccole (in photoshop CSS si poteva fare era il simbolo del taglierino, nelle versioni successive non so
)