Du borde kunna göra något i stil med:
<div id="1">
<div id="2">
<div id=3">
Texten här
</div>
</div>
</div>
#1 = det blåa, med repeat-y på bakgrunden.
#2 = Det röda, med bakgrund överst, med no-repeat.
#3 = Det gröna, med en bakgrund med background-position: 0 bottom;
i CSS3 tror jag dock man ska kunna ha flera bakgrundsbilder i samma div, men det dröjer väl ett par år innan man vågar använda det.