Build Your Own Business Website header image

Style the Full Width Framework by Layering Background Images

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1

This is Part 1 of 2 in a series on How to Style the Full Width Framework by Layering Background Images. In this session we show how to layer background images using the BYOB Thesis Full Width Backgrounds plugin so that you can have a background image that covers the whole area, a background image for the header area, page area and the footer area.

Video Transcript

The first thing we’re going to do then is we’re going to layer background images using the BYOB Thesis Full Width Background Images or Full Width Backgrounds plugin… if I can spit that out. And what is going to happen is we’re going to have a great, big background image that will cover the whole background and then we’re going to have a background image for the header area. And then a background image for the page area and then a background image for the footer area. So we have background images either laying on top of each other or stacked top to bottom.

And we’re going to start that here, right? So here’s my big background image and then this is the background image that will be in the header and the footer. And this the background image that will be in the content area so the content area is going to end up with a nice, white background to it. This concept can easily be used to, for example, put a colored background in a sidebar and to make sure that the colored background goes from the top of the page to the bottom of the page. Most typical CSS solutions to adding a colored sidebar end up having that sidebar not have its color extend all the way to the bottom of the page because pages can be longer than the sidebars. But you can also use this concept to do that and I might even… I probably won’t do it today but I will also show you to just add a background color to a sidebar using this same system.

But these are the 3 images that we’re going to use and I have those 3 images here. Oh let’s see, wrong website though. So we’re working on this one here and we go to… let’s see, wp content, themes, thesis_182, and custom and images. Now, you probably remember… I thought I put all that stuff in here but obviously, I did not. I must have put it in the wrong spot. So… that’s funny. I was going to show you how I have these images here because I’m going to upload them over there. But since that didn’t work, I think what I’m going to do is figure out where on earth I did put those images really quickly. Tutorial sites… let’s see, this was the thesis.byobtutorial. Okay, that’s what I did. I put it in the graphics but I didn’t put it in the site itself.

So I’m going to grab that background image and then the two little images. I’m just going to grab them over here and drop them. And then I can go ahead and grab those 2 again and I can download them back to this part of my file.

Okay so anyway, we’ve got those 3 images there and now what we’re going to do is use them. So we’ll come back over to the dashboard on this site and I’ve got my Full Width Backgrounds plugin already installed. And now what we’re going to do is we’re going to customize the body, the header area, the content area and the footer area. So we’re going to do all of those. And the first thing we’re going to do is put the body background style in. Now the… and so what we need is the location of that so we will grab… start with this and then we’ll open up… we’ll go back to FileZilla and we’ll copy the wp content… okay, come one, just let me copy part of it. WP content, themes, thesis_182, custom, and images and then slash and then the name of that image was sean-bg.jpg.

Okay so now we’ve got the image there. Then I’m going to actually stop right there, hit save, and we’ll take a look at the result. It’s not going to be exactly what we want but I want you to see what we have to adjust in order to make it work the way we want it to work. Well, it certainly is not exactly what we want. Background image… and that does not have my themes, thesis_182, custom images, sean-bg.jpg. Copy… well no, that’s the right URL. Okay, let’s save that again. Maybe I didn’t save it properly. Okay, there we go.

So now that image shows up here and if we… oh, it’s nicely centered actually. If we were to… but you can see it’s cut off, right? Because the background… because there’s a background color that has been set for the rest of this site. So what we need to do here then is come back over to background image. What we want to do is we don’t want it to repeat in either direction and we may as well just specify that we want it to be centered in the monitor and then we want it to start at the top. And then we can just say save to that. That gets it in its right position.

Oh actually, there’s one other thing. Since the image is black, we want the background color to be black. And so I’m going to enter black there which is all zeros and hit save to that. And then we have to make other things transparent. So we’re going to start off with the header area background styles and we’ll start with the background image. If we just hit “Make it transparent” and then content area background styles, background image, make it transparent, and then footer area background styles, make it transparent… now the image is going to show up all the way through, right? And you can see where the image ends, it goes down to black down here at the bottom.

0 Comments… add one
0 comments… add one