How to add a background image to each page of mobi or epub books?

Question

How we can add background image or fancy borders to each or any single page of mobi/epub book? as I understand epub is in html format is it possible to add the background using the css files? but I am not sure if it will impact the book quality of re-flowable mobi/epub.

Answer 1

You could try with standard CSS rules and see if the results work for you.

Example for the background:

body { 
    background-image: url(../Images/image.jpg); 
}

You can also try other background rules (reference).

Same thing for borders, you can try standard CSS rules:

body {
    border: 1px solid black;
}

(Reference for borders, margins, padding).

You should play around a bit with these rules to find something that will work for you and adapt it to your needs; keep in mind that printed books and fixed layout file formats like PDF can be considered layout-based, meaning that you can insert the content inside a predefined and customized page layout, while epub and other reflowable-text formats, viceversa, are mainly content-based, they don't have "pages" in the common meaning, their core is the text content to which you apply a style afterward.

---

My personal suggestion, if you need to apply these styles, is to not abuse of them.
An image background if used should be very light and subtle to prevent it to render the text less readable, and about borders, keep in mind that the most common ereaders have an average display size of about 6 inches, applying a border and its relative margins and padding will reduce the (already few) space used by the text, something that many users might find annoying.
The golden rule is to test all your custom styles on an actual ereader and balance the aesthetics with usability.