Customizing Your Drupal Theme’s Background

Okay, so you have a Drupal theme installed but the background is not what you want.

Let’s change it! I will show you a very simple way to change your background. You can use this example to change your background to any style you desire.

Step 1: Upload Your Background Image

You can create your own background image with a program like Adobe Photoshop or find a free image by doing a Google search.

Once you have narrowed it down we need to get the image ready to upload. For this example we are going to use a dark color. The image is black at the top and fades to a dark shade of grey as seen below.

We do not want to upload this image. Why? It is too big and it will take way too long to download on a browser if the user has a slow connection.

In order to make this image more usable, we are going to trim it down to size.
Originally, it was 600 pixels by 300 pixels – let’s crop it down to 1 pixel by 300 pixels – we are going to save our background image as a PNG file and name it – you guessed right – background.

Yes, that little sliver on the left is all we need to make the background.

Now that we have the image ready let’s upload it to the proper file.

Go to your theme’s image folder as shown below:

Wow, that folder is buried.

Okay, now that we have the correct folder it is time to upload.

1. Double check the file path.
2. Upload the file from your computer.

Step 2: Changing the CSS File

Currently, the Zen Theme looks like the picture below.

The background image we just uploaded isn’t visible yet because we haven’t told Drupal what to do with it.

So, let’s head up to the Zen Folder.

Once you have clicked on the Zen Folder, scroll down to a file called zen.css and open it in edit mode. (Depending on your host you may have to right click the file to select File Edit.)

Once you are inside of the zen.css file, scroll down and find the ‘body’ section. We are going to insert a CSS command telling the web page to print the image file we just uploaded. If you are following along with the Zen theme you will see something like the image below.

The command ‘repeat-x’ that you see after the image path is telling the web page to repeat the image horizontally (x = horizontal axis). By default the image will be positioned in the top left corner.

Once the CSS file is saved it should look similar to the image below.

As you might have noticed, we are not quite done. Our image only repeats half way down the page and the text is too dark to read.

In the same section we edited above we need to add a background color using the hexadecimal numeral system. The color we are going to add is the same color found at the very bottom of the background image we uploaded.

The color number for the example image is #333333.

We also need to change the body’s font color. We can change that by adding the command line: color: ffffff;

See the changes in red below.

Once you have made the changes, click save.

The final result will look like the image below.

Bravo! You have successfully customized your Drupal background. As you can see the background starts off black at the very top and fades to a dark shade of grey and the font is now white.