Build Your Own Business Website header image

How to Add Background Color to a Sidebar so that it Extends to the Bottom of the Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

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.

In this session a member wants to know how to add background color to a sidebar so that it extends to the bottom of the page on his full-width framework site. We show how to use a background image for the entire page that includes the sidebar color and content area color. We use Photoshop to optimize the image and then insert it using our Full Width Background plugin, repeating it vertically so that it reaches the bottom of the page.

Video Transcript

Rick:  Good morning, Richard. I’ve just unmuted your microphone.

Richard:  Hey, Rick. How are you?

Rick:  I’m doing great.

Richard:  Good, good.

Rick:  So let’s… do you have a URL that we can go take a look at?

Richard:  Yeah, it’s

Rick:  Okay, so this is it here?

Richard:  Yes, sir.

Rick:  And what you want is these brown colors to continue all the way down to the bottom.

Richard:  Yeah, the sidebars to extend. Correct, correct.

Rick:  Okay so the… are you using the Full Width Framework here? It looks like you are.

Richard:  Yes.

Rick:  And are you using my Full Width Backgrounds plugin?

Richard:  Yes.

Rick:  Okay, that’s perfect then. What you would do is you would create an image that is 20 pixels tall, that is exactly as wide as your page. So from this edge to that edge that has this much brown and then white and then brown and you would make that the background image for content area .page.

Richard:  Okay.

Rick:  So now I don’t know if that makes perfect sense to you just as I described it or do you need to see a little bit more about that?

Richard:  If you don’t mind showing me a little bit more…

Rick:  Sure. So I’m just going to play with this actually so I’m going to take a screenshot here real quickly. Okay and I’m just going to… okay so let’s save that and then take that screenshot and open it up in Photoshop because… how did you create the brown color? How have you done that already?

Richard:  I went into… I believe it was the site that… Site Options or site design… Design Options.

Rick:  Design Options doesn’t have a place for you to change the background color for your sidebars.

Richard:  Okay. Actually, I think I put a little code in there. I’ve been looking online to figure out how to do it and some guy had a code. But it didn’t extend the sidebar all the way down to the footer. That’s my problem.

Rick:  Right, yeah. And that’s the problem with using CSS to do that or using straight CSS because straight… the sidebar actually ended. And so the trick here is to continue that color even though the sidebar is ended and the only way to do that really, is to use a background image for the whole content. So if we go to… let’s see, where did I just… yeah, documents and the last image… let’s see here. Just trim it down a little bit and I’m going to zoom in on this edge just to make sure I get… how many pixels do I have? I have 1, 2, 3, 4, 5.

We need to remove 5 pixels off of this. So canvass size, width is 1143 so 1138 and I’m going to trim it in that direction. We may as well just make it 20 pixels now. That’s all the bigger the image needs to be. Okay and so then we want to just make this whole section white so I’m going to just put a little white fill there. And then I want to get the… let’s see, let’s get this color here. And so again, just going to select everything there and put that color in there.

So now we have an image that has the brown color just far over and this far over. And file and then save for web and devices and we just optimize this quickly. So PNG 24 is 234 bytes, a gif… actually, we should be able to do a gif too and it’s still 353 bytes so the gif isn’t the right choice. PNG 8, 207 bytes. Okay, we only have 2 colors here. We’ve got the white and we’ve got the brown or green or whatever. So we’re god with a PNG 8 2-color. It’s only 207 bytes so it’s a very small image and we’ll save it under… I’m just going to save it to the desktop at the moment and I’m just going to call it page background.

And then open up a site that has that on it so let’s see… now, this isn’t going to look quite right because this is a 2-column layout but you’ll get the point, I think, at this point. Because we go to Full Width Backgrounds and we’re going to do the content area here and this goes under content area .page. So let’s see, let’s add the media real quickly. Off of the desktop, page background png, company address. Bring it over to this section of background image.

We’re not going to repeat it in both directions. We’re only going to repeat it vertically and in order for this to look right… yeah, I think we’ll just leave on top left for a moment. I mean, you’ll want to adjust this. You’ll probably end up actually saying top center is what you’ll say with this in your situation. And if we refresh this you know, if you can imagine that if the page is actually as wide as your page is you know, even though the sidebar ends here, the color actually goes all the way down to the bottom.

Richard:  Okay, perfect.

Rick:  Because what it’s done is it’s repeated this image.

Richard:  I see.

Rick:  You want me to email you that image?

Richard:  If you don’t mind, Rick, that would be great.

Rick:  Okay, let’s see… I’m pretty sure I have your email address here. I do.

Richard:  Great, perfect.

Rick:  Okay, I’ll email that to you here when the session’s over with.

Richard:  Great. Thank you so much, Rick.

Rick:  Okay, you’re absolutely welcome. Have a good day.

Richard:  Alright, you too. Bye bye.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one