Adding Background Images and Gradients to Your eBooks

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook production? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Changing the background in eBooks is not possible on e-ink Kindles/Kindle for iOS; however, since the Kindle Fire runs on the Webkit engine, it is possible to use higher-level CSS properties to style different types of backgrounds on this device. To change the color, you simply use the background-color: color code; syntax. This may be suitable in some situations, but print books often have repeating images or gradients in the background of certain types of content to draw the reader's attention. This guide discourages altering the background for the entire eBook, because it prevents the user from selecting their default background (on the Kindle Fire users have a choice between white, sepia, and black). Full background alterations can also looks tacky--like a MySpace page circa 2005.

Background Images

Hypothetically, you have a public domain image from a site like Open Clip Art that you would like to be the background for some boxes of content in your eBook. This 50x50px image has the filename seashell.jpg and it is in the same directory as your CSS file. The CSS syntax to declare the seashell as a background image is as follows:

p.myseashells

{

background-image: url("seashell.jpg");

}

Tip: If your image file was in a different directory than your CSS, you simply specify a relative path for the URL such as "./myimages/seashell.jpg". In this example, the CSS file is in the parent directory to myimages.

Now that you have declared a background image for paragraph elements with the myseashells class, you can implement the CSS with the following HTML markup:

<p>Normal paragraph content</p>
<p class="myseashells">This is paragraph content where there is a background image applied. Notice how by default it repeats both horizontally and vertically. We will learn how to further customize our CSS to allow repeating images.</p>

Background Image on Kindle Fire

By default the background image repeats vertically and horizontally to encompass the entire box of the paragraph element. The first seashell is located at the top and left of the box, and it repeats until the start of the border section of the box. This means that if any padding is applied on the box, the background image will be rendered behind the padding section as well as the content section.

The preceding example is a bit unseemly, because it overwhelms the content. There isn't a good way in CSS to add transparency to a background image. To make the image have some opacity, you can add an alpha channel in a suitable image editor and save the image as a PNG. You may also want the background-image to repeat in specific directions or not at all. Here is the CSS to perform this task:

background-repeat: repeat-x; /* Repeat Image Horizontally Only */

background-repeat: repeat-y; /* Repeat Image Vertically Only */

background-repeat: no-repeat; /* Image Only Appears in the Top Left */

Different Repeating Background Directions

Gradients

Adding gradient colors to your eBook gives a very professional look on content you would like to emphasize to the reader. While using a gradient for the entire background of the viewport would cause poor readability, gradients can be useful for individual boxes of content you would like to stand out. The syntax for generating a gradient background can get a bit complicated. It also doesn't help that the CSS3 standard for gradients is still evolving and changing, even though it was introduced way back in 2008. Since Kindle Fire is based on the Webkit engine, the following is the basic CSS syntax for a linear gradient. Please note the -webkit- prefix and the fact that there are no spaces before or after the parentheses:

background-image: -webkit-gradient(linear, staring point, ending point, from(color), to(color));

If you wanted a gradient to start on top of the box with a white color and end with a gray color, some sample CSS would look as follows:

p#graygradient

{

background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));

border-radius: 15px;

border: 1px solid black;

padding: 5px;

}

Gradients on Kindle Fire

Notice how the gradient starts at the top with the white color and terminates at the bottom with the gray color. It is also possible to provide different directions in the first and second values. The entire specification that is unique for Webkit is here.

Important Note: The -webkit- prefix is required for the CSS3 to be recognized on Chrome and Kindle Fire. The newer gradient specification that uses a different syntax does not yet render on the Kindle Fire.

Adding Background Images and Gradients to Your eBooks