Don't use background-image. It isn't part of the EPUB required CSS subset, so not all readers will show the image.
There are only two correct ways to do what you're asking:
- Use an image that contains the text (which will not be searchable).
- Use SVG.
I would recommend a combination of the above. Use SVG, and produce two versions of your EPUB—one for Kindle translation and one to ship publicly. In the Kindle version of it, include *two* copies of each image—a flattened PNG image with text inside it and a PNG image without the text. Then use CSS media queries to tell Kindlegen to include the flattened PNG version in the MOBI book and the non-flattened SVG version in the KF8 book, e.g.
Code:
@media amzn-mobi
{
.mobiOnly {
display: block;
}
.kf8Only {
display: none;
}
}
@media not amzn-mobi
{
.mobiOnly {
display: none;
}
.kf8Only {
display: block;
}
}
<div class="kf8Only">... SVG here ...</div>
<div class="mobiOnly">... flattened image here ...</div>