I don't know why you chose my svg approach for text over image. Of course that is valid but there are other alternatives that do not involve the use of svg images. Here is an example of another way to achieve what you want (you are posting in the epub forum, but if you are going to use it in books for Kindle, the code needs modifications):
1. In the .xhtml file:
Code:
<body>
<div class="top">
<h2>Chapter Title</h2>
<p class="center bold top">"...so that at least I may come to rest<br/>in death in the tranquil resting places"<sup><a href="../Text/ftn.xhtml#ftn1" id="ftn1">[1]</a></sup></p>
<p class="right bold">Virgil</p>
</div>
</body>
2. In the .css file:
Code:
@font-face {
font-family: "Fontin";
font-weight: normal;
font-style: normal;
src: url("../Fonts/Fontin.ttf");
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background: url("../Images/ch-template.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
h2 {
text-indent: 0;
text-align: center;
font-size: 1.4em;
margin-bottom: 25%;
font-family: "Fontin";
}
.center {
text-indent: 0;
text-align: center;
}
.right {
text-align: right;
}
.bold {
font-weight: bold;
}
div.top {
margin: 40% 15% 0;
font-family: "Fontin";
}
As you can see, I'm using "html {height: 100%}".
This can produce some issues if the page is not only for a image with some text inscribed over it. But if want to uses as a start of a chapter only, then no problem. Below you can check the respective epub. Probably the margins used by me will need a tweak, but the important is to show the method.