Build Your Own Business Website header image

Portfolio Website With Horizontally Scrolling Content – Part 4 – Configure the Footer Background

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

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, we add the footer background image that will repeat horizontally using our BYOB Thesis Full Width Background Plugin. After the background image in the footer area, repeating horizontally, we set the #footer_area .page background color to transparent.

Video Transcript

Rick: Now what we’re going to do is exactly same thing with the footer except we’re going to tell the image that we want it at the top of the footer. But before we do that, let’s go to our footer widgets and turn off whatever background there may be about that. Yeah, let’s… we’re not going to customize background styles. Let’s see, what happens once we did that? Oh, we still got some black in there. We’re not going to customize that.

Kim: Yeah, I was trying to get that to work but I think I went back and made everything a black background.

Rick: Yeah well it’s still… let’s get the rest of the… let’s get the rest of this part of it done first.

Kim: Sorry about that.

Rick: Okay so we’re going to go the Media Library and we’re going to use the bottom edge here and grab that image. And then under our footer background color and image, we are going to give it that background image. We’re going to make it black. We’re going to repeat it horizontally. We’re going to make it top center and footer area .page is going to be transparent. My turn to have a miscellaneous phone ringing.

Kim: I told my mom to answer…

Rick: Yeah well this is a… it’s Susan. Okay and so we hit save to that and refresh this. And okay so we still need to get rid of that.

Kim: The black and the footer area?

Rick: Yeah so we go to footer widgets and let’s see, we have no background color right there. Footer row background style. I’m going to say no background image there.

However, we do want a footer padding and margin and we’re going to… let’s just give ourselves…

Kim: Sorry about that.

Rick: Okay, we’re going to kill the overall footer marin top and kill the footer margin bottom. But we are going to put a… let’s see, 50-pixel padding at the top of the footer. And then we’re going to see what it looks like. Okay, there we go.

Kim: I’m so excited.

Rick: So what will happen now is that this footer will grow dpending upon what kind of content you put in this in each of the widgets. If you have a widget that’s got lots of content and it’s going to grow further down but the top of it will stay right where it is. You can see here where you know, there is… oh actually, it doesn’t. It’s not bad.

Kim: But… so as I add stuff in the content, it will…

Rick: Well, we need to make the content a fixed size.

Kim: Okay so while we’re at the footer… so even if it grows, don’t you want the footer to be black all the way down and not stop…

Rick: The footer is black all the way down. What you see now is the… because there’s not enough content to fill the browser window, what you see here is body. From the lecture the other night, the body covers you know, fills the entire browser window. It is always the full browswer window. And the page width comes from the settings in Thesis and its height comes from the content. And since there’s no content here, there is… well, now you can see we’ve got a little bit of content and so it drops down.

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

Leave a Comment