This is Part 2 of 4 in a series on Creating a Full Width Footer Using BYOB Thesis Plugins. In this session we show how to add a background image to the footer using the BYOB Thesis Full Width Backgrounds Plugin.
So now the next thing I want to is I want to put a background image in behind all of this stuff. As you recall, this piece was created using a CSS 3 gradient but this piece we’re going to create using a background image and it’s a background image that we’re going to repeat. So it’s one background image fills this spot but then it’ll repeat to the left and to the right in order to fill up the window space.
So we come back over here to the dashboard and we select our full width backgrounds. And we are going to add the footer area to one of the backgrounds that we’re going to change. So hit save there and now, for height, I think I’m going to make the footer area height 600 pixels. This is going to be one of those fat footers so 600 pixels tall. We aren’t going to display any top or bottom borders. We’re not going to insert a gradient but we are going to insert a background image.
Now, in order for me to do that, I have to open up Filezilla here real quickly so we can upload an image and yeah… and so then, connect up to Thesis BYOB Tutorial, wpcontent, themes, custom… pardon me, thesis_182, custom, images, and I need to add one more image to this. Let’s see… that is the footer, strike it over to… let’s make sure we download it back to the same spot so we have that synchronized. Okay, close that up and now, I want to… this is… well, okay.
So the first thing we want to do then is put the location of this footer area background image and I’m going to… and so, that starts off with here, thesisbyobtutorial.com. And then we’ll grab the rest of the address from FileZilla which is wpcontent through images and then we’re going to add footer.png, paste that there and then at the end of images, we do a slash and then footer.png. As you know… as you probably know, I advocate placing all of your theme-related images in your custom images folder rather than say, using the… I’m going to spit this out… the Media Library.
Okay and so, we’re going to leave it at that for a moment and we’re just going to go ahead and hit save and then there will be some adjustments that we need to make and I’ll show you here in a moment. But let’s refresh that. Okay and so, this is my background image and because I haven’t specified a position, it has inserted itself in the top left hand corner of the footer area. And if we need to see that, we can take a look at that in Firefox just for grins here, inspect that element. And so you can see that this is the footer area right here. Everything is colored in blue and if I move the window over, you can see that the page itself adjusts in relationship to the left edge of the window and that’s where, currently the image has placed itself, in the upper left hand corner of the window.
So now, we need to use the position tools to tell it where we want it to go. So again, we’re back to background images. And now, what we want to do is we want to place it in the center and we’ll place it at the top center of that area. So if we hit save now and refresh it, now it’s in the center. And now what we need to do is make it repeat itself. And so, back to the background image and we want to repeat it in the x direction which is left to right and hit save and hit refresh. Okay, now we have this background image repeating itself all the way across the screen. And while it’s… this is not clearly evident to you at the moment because what’s happening in the middle here is hidden, it will retain its you know, its position in the middle so… because it’s organized about the middle rather than organized about the left or right hand side of the screen.