Adding a background image to the theme

Zen-based themes come with a plethora of stylesheets separated logically by functionality. In this recipe, we will be exploring their use by adding a background image to our myzen theme.

Getting ready

As usual, we are going to assume that myzen is enabled and is the current default theme. Since we are going to be using a background image in this recipe, it will also be a good idea to ensure that the myzen theme is using a fixed-width layout to improve the visibility of the background.

The background image to be used should be optimized and saved in the sites/all/themes/myzen/images/ folder. In this recipe, we will be setting the image file named body-bg.png as the background and repeating it along both the X and Y axes.

How to do it...

As Zen-based themes use stylesheets partitioned based on their functionality, we can add our rules to the file page-backgrounds.css as follows:

1. Navigate to the sites/all/themes/myzen/css folder which contains a set of stylesheets...