• Share a link to this article:

Page Backgrounds

Body background images, textures, container backgrounds and overlay images are all stored within the theme contents. Body background images and container backgrounds are often tied to theme style settings (like the body background options) and these images are applied via CSS backgrounds. All theme images can be accessed, edited or deleted in ThemeFlood RapidWeaver themes.

With the themes pane open in RapidWeaver, right-click on your theme preview icon and select Reveal theme contents in Finder. In the new Finder window that opens, double-click on the images folder. Then double-click on the editable_images folder. In this folder you can then edit or replace any of the images listed, as pictured below.

Editable Images

When bringing your own images into a RapidWeaver theme, follow these simple rules to get the best results:

  • If replacing images, replace images of the same format and file name. This ensures a theme can continue to 'see' and use your images, if the images are linked to theme settings. So for example, an image named sidebar-background.jpg should be replaced with one of the same name, if you want to choose to use it via the theme settings.

  • Avoid using images over 200KB in size. Images should always be saved at 72 dpi (which is the standard for web graphics).

  • Large images over 200KB can make pages load significantly slower and lower-powered devices (like smartphones or tablets) may fail to display the images at all.

  • Scale images down to the maximum size you need them to display at. Again this will help keep pages loading fast and bandwidth to a minimum.
  • Use the web-export options in software like Photoshop, Acorn, GIMP or Pixelmator, when preparing images for the web. Also you should run images through a free application like ImageOptim, to optimise them for the internet and remove surplus data.

The techniques described above are for the editing of static background images; the ones typically applied with CSS code. For theme header and banner images, please refer to the knowledgebase article covering the setup of FreeStyle banner and header containers.