If you've been following our series on Basic WordPress Theme Design this post essentially plays the role of part 5. In this post we'll return to the theme we've been building and we'll add some background images as well as some background colors. With one minor exception we'll mostly be working with our style.css and header.php files.

This post will advance our WordPress theme from what you see in this example from Part 4 - to what you see in this one.

I'll provide the two images needed for this part of the project but feel free to use your own if you want to.

Let's get started!

Assembling and Naming our Background Images

As a hard rule it always help to name things based on their roll or function. When it comes to images that are part of a theme I like to go a step further and name the background images after the page division they go with.

In this way a background image like the one here at wp-Toolbox would get named "body.png" while the background for my footer would get named "footer.png." It makes it easy to tell what image does what at a glance and it makes coding the page that much simpler.

For our background image, in both this basic theme and the wp-Toolbox, theme I decided to go with something from the Web 2.0 Stripe Generator. After I created a background I was comfortable with I saved it to my computer and simply renamed the file "body.png." You can download that file here.

At first glance this is the only image I'd need for the background of the theme (except for the navigation banner we haven't added yet). That first glance is deceiving though.

Returning to our example from pt 4 you may notice that our sidebar doesn't reach all the way to the bottom of the page. The color, in fact, cuts off right under the last item in our sidebar's category listing. Unfortunately CSS only allows our browser to display an image for the height of an item - when an item ends abruptly so does the background image.

If we simply relied on color as the background for our sidebar it simply wouldn't reach the bottom of the page. If we set a height to the sidebar it the image would reach further - but longer or shorter posts would result in an aesthetically unpleasing look. Huge pages with little text, or short pages with text that scrolled far beyond where the sidebar image ended. To fix this we need to have a container that reaches all the way past the sidebar to the bottom of the content container.

Unfortunately we can't use the content division - but we can use the mainBody which encloses both it and our sidebar!

The image I created is 900px wide and separates our content and sidebar with a black line at the 260px marker. This actively separates our sidebar and content. A slight gray tint also helps pronounce the difference between the two.

I saved this image as "mainBody.png" - you can grab it here.

Last but not least we should create a folder for housing these images. I usually name it "img-structural" because these are going to be our structural images.

Once you've created the directory you can upload the images as well as the folder. Now it's time to add some style to our header.php file!

Before we get started though let's remove some old rules from our style.css file. Open up style.css and start by removing 'background: green' from the #sidebar and 'background: blue' from #content. Once you've done this you can save the file.

Adding Background Images Using header.php

To get started locate the <link> tag that we used to include our stylesheet. If you're following our process exactly you should find the code on line 3.

At this point we're going to want to add the code for adding style directly to a page it's going to look like this:

<style type="text/css" media="screen"><!--
body {}
#mainBody {}
--></style>

The next step is to add the basic code needed for adding a background image. In CSS we do that with the background property but we also use url() as part of our values. You can see an adjusted version of the code below.

<style type="text/css" media="screen"><!--
body {background: url();}
#mainBody {background: url();}
--></style>

Now it's time to create the URL that leads to the image.

The code we're going to be using here is a combination of PHP and HTML and it relies heavily on a Template Tag we've used a few times now - bloginfo().

In order to find our images in WordPress we have to start by looking for our style sheet. The code for doing this is very similar to the code we used to grab our style sheet back in part one of this series. There is however a slight difference. In part 1 we grabbed the style sheet by using bloginfo('stylsheet_url') which gives us the URL of style.css - in this case we don't want the URL we want the parent directory. We do this by changing 'stylesheet_url' to 'stylesheet_directory.'

Where stylesheet_url would return:

yourURL/wp-content/themes/yourTheme/style.css

stylesheet_directory will return:

yourURL/wp-content/themes/yourTheme

It's just up to you to add the rest of the URL - in this case 'img-structural/body.png' and 'img-structural/mainbody.png'

<style type="text/css" media="screen"><!--
body {background: url('<?php bloginfo('stylesheet_directory'); ?>/img-structural/body.png');}
#mainBody {background: url('<?php bloginfo('stylesheet_directory'); ?>/img-structural/mainBody.png');}
--></style>

We're almost done with the images - now we just have to tell them how to repeat.

In both cases we want the images to start in the top left corner of the page and repeat outward from there. In the case of body.png we want it to travel to the right AND down. For mainBody.png we just want it to go down.

The code for the body portion of our style should now look like this:

body { background: url('<?php bloginfo('stylesheet_directory'); ?>/img-structural/body.png') top left repeat; }

Things are going to be a bit different for #mainBody though. Essentially we want the image to repeat on the y-axis. So we use 'repeat-y' instead of just repeat. Our code for #mainBody should now look like this:

#mainBody { background: url('<?php bloginfo('stylesheet_directory'); ?>/img-structural/mainBody.png') top left repeat-y; }

Save the files and reload your theme - you may notice a problem. The background image is only appearing until the end of the sidebar. This goes back to our issue with the content division having the 'float:right' property and value. To fix this issue we'll need to add some quick code to both our style.css and index.php files.

In index.php browse to the </div> tag that closes #mainBody. Right before that </div> tag add "<br class="clearBoth" />.

In style.css head to the bottom of the file and add the following code:

/* Custom Classes */
.clearBoth { clear: both; }

We've now created a class that we can use to clear up issues with floated items. Whenever you run into an issue like the one we just saw with our sidebar (or the one we saw with our footer in Part 4) we can use "clear: both" to try and trouble shoot. Save both inxex.php and style.css and reload your theme - Looks much better.

Adding a Background Color with CSS

Last but not least we want to fix the issue with our red and yellow header and footer. To do this we'll turn to our stylesheet and use the simply change the colors to black. The problem, though, is that the font in our header is already black so a black background would virtually make it invisible. To fix this we just add "color: white;" to #header.

If you're having trouble at this point feel free to compare your files against the style.css and header.php files I've compiled. These files are a direct result of copying and pasting all the code provided in the series so far and when run as a theme produce a page similar to this example page.

While this series has stretched over several days you can see we've done relatively little coding but achieved a great deal. One of the biggest problems we have right now, though, is that our blog has a bunch of posts but they lack any good formatting.

In the next section of this series we'll handle fleshing out our posts with some Style and some PHP to get things working more like a proper blog. We'll also lay the groundwork for finishing our header!