Stretchable Body Background Images
Body background images form the main focal point in this RapidWeaver theme. However, the setup of background images in this theme differs somewhat to other themes (which tend to use tick options under the Page Inspector to choose which background image is loaded). In this particular theme, the Extra Content method is used to embed background images. This gives you precise control over image size, image source and the ability to have different images on different pages. Extra Content also enables more advanced elements to be applied as a body background, such as slideshows.
In essence, applying body background images is easy. Copy the code below and paste it into your Sidebar container (without formatting) in RapidWeaver:
The image number (in this instance 2) can be changed for any number between 1 and 15 if you are experimenting with the demo images supplied with this theme. Some themes include up to 25 demo images. If you want to use your own images, these can be dragged and dropped directly into this standard Extra Content code, replacing the image tag. Likewise you can also source background images via a URL – such as images already uploaded or those stored in a warehouse online.
The target file size of background images should be 100KB - 72 DPI. Image which measure approximately 1000px square tend to give the best results across a wide range of web browsers. It is normal to expect some distortion of images if they are stretched to fill a window. Typically some images like generic landscapes, places or patterns will work better compared with images of people or animals etc. Also remember that some devices like the iPad and iPhone handle image scaling differently to desktop web browsers.
There are also two Stacks available for this theme which enable you to use the Stacks plugin by YourHead Software (not included) to easily embed background images. Use stack 1 to drag and drop an image straight in. Use stack 2 to source an image via a URL. Please note that if you use stack 1, Stacks will automatically convert the image to PNG which may result in very large image sizes, if dealing with photographic quality images. You could also embed images straight in the theme (like the existing 25) and call them via the above code.