How to change the background image?

Choosing the right background image for your flipbooks can really change the overall impression that your readers get.

Flipbook with a standard background The same flipbook with a custom background

If you apply one of the standard skins to your flipbook, the background image of that skin is used. But you can easily change it to something more fitting.

Keep on reading if you would like to learn more about:


Steps to change the background image

Here is how you can change the background image: 

  1. Go to the Settings tab.
  2. Click on the Appearance section to expand it.
  3. Click on the thumbnail image next to Background Image and choose Select Image:

  4. Browse to the directory where you have your background image saved, select your image, and click Open.

Your selected image will now be used for your flipbooks.


Background Placement options

You can configure the Background Placement and Background position settings to control how your background image will appear on different-sized screens. This setting can be found on the Settings tab in the Appearance group:

There are three options for the Background Placement:

  • Fill: the complete screen will be filled with your image while keeping its aspect ratio intact. But pieces from the side, or top and bottom may have to be cut off.
  • Fit: the image is resized to fit completely on the screen, so every part of it will be visible. Since we keep the aspect ratio intact, a part of the screen may remain uncovered - leave borders around the image. The borders will be filled using the color set for the Window Background option. The difference with 'Fill' is that in 'Fit' we stop filling the space as soon as either the height or the width fill up the full screen, whereas in 'Fill' we make sure both fill up.
  • Tile: This option takes your image in its original size and puts it in the center of the page. If the image is larger than the available screen space, then parts are cut off. But if it is smaller, then the image will be repeated in a tiled pattern.

You can also control the Background Position to pin the image to the screen. This is useful if your image contains a part that you always want to be visible, for example, a logo in the top left corner. If you use the Fill option for background placement, then the logo may fully or partially disappear on some screens (or when your reader resizes the browser).  Pinning it to the top left will always keep it visible. 
When the image is centered, part of the logo may drop off the screen When pinned to the Top left, the logo is always fully visible

Background image recommendations

Here are some recommendations on background image:

  • Avoid using an image that is too small. If you are using any background placement option other than Tile, use an image around 1000-2000 pixels wide, otherwise, your image may get stretched out and become a bit blurry.  For example, use this resolution 1920x1080. This is the most popular resolution that scales well on most common screens. 
  • Avoid using a large file for a background image (the recommended file size is around 100-300 KB). A large file (over 1 MB) can take longer to download, degrading the overall user experience
  • If your image file is larger than 1 MB, resize it to around 1200 pixels wide and save it as JPG. JPG is much more efficient than other popular image formats. Also, you can quickly resize an image in the online tool TinyPNG.

Related articles

Did you know that FlippingBook Publisher includes lots of options to customize the skin of your publication to your own taste? To find out more about these options, please, check our article Customizing the skin of your publications.

Was this article helpful?
drift chat