Add Background Images – Case Study, Styling a Gardening Blog Part 2

by Rick Anderson on April 30, 2012

In part 2 of this series on Styling a Gardening Blog, we add background images using the Thesis Full Width Backgrounds Plugin.

Install BYOB Plugins

Rick:  So the next thing we’re going to do then is install some plugins. We’re going to install my Thesis Simple Header Widgets plugin and we’re going to install the Full Width Backgrounds plugin. And we’ll start with Full Width Backgrounds. Okay, save link as… save. While we’re here, we may as well get our WP Menus plugin and then let’s go to the Simple Nav Menu. Actually, we’ll install the Simple Nav Menu from inside the site.

So plugins, add new… okay, Thesis. Okay, install that, activate the plugin. We may as well just add new, upload and we’re going to do the BYOB Thesis Full Width Backgrounds. And add new, upload and BYOB Thesis WP Menus plugin.

Get Background Images

Now we’re going to go look at the site. The site’s going to look crazy now, I think. Oh, it looks fine. Okay so then the next thing we’re going to do here is configure the Full Width Backgrounds plugin. And I’m going to open up the Media Library because we are going to drag 3 images into here. Let’s see… documents, websites. Okay, I’ve got 3 images. We’re going to add the dirt which is the big background image. We’re going to use the footer image… that’s funny.

Jared:  How about the favicon too?

Configure Thesis Full Width Background Plugin

Rick:  Yeah, we’ll do that separately. Footer background header, transparent logo, dirt… okay. And we’re just going to drag those there. We’re going to start off with the Full Width Backgrounds plugin and we are going to customize everything. So header, body, header area, content area and footer area.

And in terms of the body background, we are going to choose this image. It’s going to repeat in both directions. We’re going to start it at top center. We’re not going to give it any specific position and we’re just going to hit save.

Header Area

Okay and so then the header area… actually, we’re going to need to define a height for this header area. And let’s see how tall this is. This is 300 pixels tall so that’s how high the header area’s going to be. So back over here, header area’s going to be 300 pixels tall.

We’re not going to do any borders. No drop shadow, hover over the background. We’re going to make the background itself transparent but we’re going to put this as the background image. It’s not going to repeat and it’s going to be in the top center. And we are going to make header area .page transparent as well. And we’re just going to save this so we can see what it looks like because this should give us the big background plus some stuff in the header now. Yeah, okay.

And so what’s happening here is that this background actually extends all the way down but it’s being covered up by the content area color and the footer area color. And so that’s the next set of things we’re going to change.

Footer Area

And so we’re going to go to content area background color and image. We’re just going to make the background transparent and let it go at the moment. And then we’re going to do the same thing with the footer area. Now I think the footer area’s going to need a height. We’re going to start off at 400 pixels but I’m not quite sure how tall that really needs to be.

We’re going to make its background transparent. We’re going to give it a background image from here. Let’s look at the footer. Footer is 289 but I also wanted some space below, I think so copy that and put it here. Now this one does repeat in the y direction or repeats horizontally and we’re going to make it top center.

And we’re going to make its footer area .page transparent and hit save. And we should be about 90% there with the background. Oh now, we’re not repeating it, my mistake. We don’t repeat that background image, no repeat, save, refresh.

Content Area

Okay so we’ve got the header background. We’ve got the dirt in the background and we’ve got the footer background. And so the next thing we need to do is take care of our content area background. And I believe that I failed to download this one image so I need to get that one there.

Content background png… notice how thin this is? That’s how big your image is, really. It’s 12 pixels tall and 1012 pixels wide. And we just center it in the space and then we repeat it vertically.

So now that we’ve got that, come back over to this and let’s upload one more media image. Okay, let’s upload it from here. I need to refresh that, I guess. Content background, drag it, drop it there. I didn’t think that worked. Do it again. It did work. I just did it twice. I expected to see more out of it.

Okay so now we’re going to copy that image URL, come back over to our content area and in our background color and image, we’ve made the background transparent already but now we’re going to put that image in. We’re going to repeat it vertically but not both directions. We’re going to put it top center and then we’re going to make background area .page transparent or content area .page transparent.

And so now we refresh this and okay… so now we have that pretty well laid out. We are going to have to fix these widgets here because they’re a little too wide but we’ll take that on here in a few minutes. Actually, we’ll probably take that on in the morning but let’s go ahead and get this fixed.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: