This is Part 5 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to add and configure background images using the BYOB Thesis Full Width Backgrounds plugin.
The other thing to do is to start flushing this page out so that instead of looking like this, it looks like this because we’ve got the structure taken care of, right? So we’re going to start doing that first with background images. That is essentially the same thing I did yesterday morning really. I didn’t really expect to be redoing this but I want to show this all in one sequence.
So we’ll come on over to Full Width Backgrounds plugin and we are going to style the body, the header area, the content area, and the footer area. Now, I have, in my custom images folder for this site, I have these background images that I’m going to use. Some of these are background images for the actual background. Some of them are background images for various pieces of the header. We’re going to start off with the actual background and we’re going to really start off with a big background and that is this one right here, sean-bg background. That is this background right here. So we’re going to put that in first then we’re going to put in this blue and then we’re going to put in the blue white and then we’ll come back down here and put in this blue and we’ll have the main background images done.
Okay and so that big background image is going to be placed inside of the body background area. And so our body background image is, let’s see, let’s grab the URL and then let’s go to Filezilla and let’s get the rest of the URL. I make so many mistakes typing that. I prefer to just copy and paste when I know stuff is right. Let’s see, did I get that? Yes, I got that line in there. Okay and then another slash and now, we’ll just grab the name of the image which in this case is this sean-bg. Because I wouldn’t have done this today had Sean been here because I wouldn’t want him to see this before tonight. But let’s see, we’re not going to repeat this in the x or in the y direction. We are going to put it in the center of the window and we’re going to start it at the top of the window and we’re going to say save. And then we’re going to refresh this and we won’t be able to see it.
Now actually, you do see it down here but what we have to do is we have to make the header area content area and footer area transparent. So we do that in each of these header area background styles under background image. If we come down here and say make the background transparent and then down to the next one, background image, make the background transparent. And then finally, the footer area background styles, background image, make the background transparent. Hit save and now that white won’t be there and we’ll be able to see into the image behind it.
Okay so now we can see the main background image and the color that we see here now, this white color is actually the color created by the .page portion of each of those areas and I’m going to show you that in a second here. In fact, let’s just look at that quickly now. That’s these things right here, customize headerarea.page, contentarea.page and footerarea.page. Those currently have a white background. And so that white background will cover up the background image itself.
Now, we’re actually going to add a background image first though, to the header area and that background image, that’s this image right here. The image that creates this little shadow and then the blue all the way across is this thin image about 10 pixels tall that just cuts right through here. We’re going to use that same blue image on the header and on the footer and then we’re going to use an image that’s very similar except that it has white in the middle, instead of the blue for the page. I mean, it’s for the content area.
And so we’re going to grab the background image here. Actually, we’re going to start up here. Take this background image and copy it. Oh, and our body background color for this needs to be black. So that’s 000000, there we go, got that. And now, our background image for the header area, paste that and then we get the right, this isn’t the right image obviously. And the right image is this one here, bluebg.png. So we’ll copy that tone, come back over here and paste it. And this needs to repeat in the y direction, that’s up and down. It needs to be centered and let’s just start up at the top. And we are going to make the headerarea.page transparent so that you can see the image behind that. And then we’ll just go ahead and just copy this again, come down to the footer area, gets the same image for the footer and we’re going to repeat it in the y direction. We want it to be centered and we want it at the top. And then we’re going to make this background area transparent as well and hit save.
So now we’ll have configured the backgrounds for the header and the footer, at least the back backgrounds. So there’s the blue, there’s a little bit of shadow projecting beyond. And so the next thing to do now then is to do the one where it’s blue and white.
So we come back over here to the Full Width Backgrounds and we go to the content area background style. Go to the background image. Paste that same image here although we’re going to change its name because it’s not actually the same image which is this blue white content background right there. Copy that one. It needs to repeat… well, I’m not going to repeat it in the y direction. In fact, I’m not going to select these at all. So you can see what happens if we don’t select repeat and we don’t tell it what its position needs to be. But we are going to make that background transparent so we can see it. We’ll hit save and refresh it.
And here’s what happens. That image has now come over to the side. So if you don’t specify a position for a background image, it always goes to the top left corner of the thing it’s supposed to cover. And so since it’s only these 10 pixels wide and since we didn’t tell it to repeat, it didn’t repeat down. And since we didn’t tell it to be in the center, it came over here to the left. Now, we want it to be in the center and we want it to repeat so that’s the next thing we do. We come back down to our background image and we say we want to repeat in the y direction and we want to center it and put it at the top and hit save. Refresh that.
Okay and there we go. Now, we have the basis for this… the backgrounds for this page. We have the header background. We have the page itself background and we have the footer background. And then we have the main body background and that’s exactly what goes into this. It’s that header. I mean, it’s the main background, the header background, the page background or the content background and the footer background. Okay? So it’s those 4 images that create this main configuration of the colors of the site.