Well, this is a "new" way of doing the things without using a background image. In this case Psymon, you'll have to use a SVG container. In your .html file write the following:
Code:
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 533 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="533" xlink:href="../Images/bamboo_fence.jpg"></image>
<text fill="red" style="font-size: 50px" text-anchor="middle" x="266.5" y="200">
This Here
<tspan x="266.5" y="280">Is A</tspan>
<tspan x="266.5" y="370">Chapter Title</tspan>
</text>
<image height="63" width="63" x="235" xlink:href="../Images/ornament.png" y="450"></image>
<text fill="green" style="font-size: 30px; font-style: italic" text-anchor="middle" x="266.5" y="600">By Author</text>
</svg>
</div>
</body>
This is a screenshot of ADE:
This is a screenshot of Sigil:
This is a screenshot of Kindle Previewer:
I don't know how it looks in iPad since I don't have one
Below you can see my ePub.
One more thing: I changed the resolution of your "bamboo_fence" image to 800 x 533 px; take in count that. Of course, you can put the text in any place of the svg container; what I did is just an example.
Regards
Rubén
PS: I still think is better to use a background image.
PS2: WITH THIS WAY OF DOING THE THINGS, YOU MUST ALWAYS WORK WITH PIXELS, OTHERWISE YOU'LL HAVE TROUBLES IN ADE.