MAIN CONTENT/EXTRA CONTENT BACKGROUND IMAGE
To utilize the option of displaying a background image of your choosing for either the main content area, or the 6 Extra Content Areas, please follow the instructions below.
1. Click and drag your image into the Resources area of the project file. (Please ensure that your images are large, high quality images. Smaller images will not display clear or crisp). The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5).
2. Insert the following code that corresponds to the background area you are targeting in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):
MAIN CONTENT AREA ONLY
section #padding {background-image: url(%resource(my-image.jpg)%);}
SIDEBAR AREA ONLY
aside {background-image: url(%resource(my-image.jpg)%);}
EXTRA CONTENT AREA ONLY
#extraContainer? {background-image: url(%resource(my-image.jpg)%);}
3. Replace the "my-image" with the name of the image AND if utilizing the Extra Content Area, replace the ? with the appropriate Extra Content numbered area. ONLY Extra Content Areas 2-7 are useable options for this feature. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).
4. If utilizing an extra content area, you must select the corresponding extra content area in the Toggle category to display the area.
Please note that content background images may switch from a switched position to one that scrolls on tablet and handheld devices. This has nothing to do with the theme and everything to do with the functionality and limitations of those devices.
Internet Explorer 8 also has limitation with processing background images. As a result, when viewed in Internet Explorer 8, background images will convert to the solid color selected for the corresponding background area.