Build Your Own Business Website header image

Portfolio Website With Horizontally Scrolling Content – Part 3 – Configure the Header 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 header background image that will repeat horizontally using our BYOB Thesis Full Width Background Plugin. After the background image is in the header area, repeating horizontally, we set the #header_area .page background color to transparent.

Video Transcript

Rick: Okay so then plugins, we’ve got my Full Width Backgrounds plugin.

Kim: I haven’t used that yet. I think I just downloaded all the plugins at once.

Rick: Right. This one is definitely not being used currently. And so then the question is how on earth are you creating this appearance right now? I’m guessing you just have some custom CSS that you put in there. Is that right?

Kim: I did it as a background, yeah… and custom CSS. That’s right.

Rick: Right, okay.

Kim: But not… but I didn’t… but I couldn’t get it… I didn’t put it in the content area. I just did it in the background area, there you go.

Rick: I’m going to delete all your custom CSS. Custom CSS, be gone.

Kim: And who was talking about the FTP today? Because I had you know, I had that firm… I had the whole FTP here myself. I don’t know why most of us have problems with the FTP thing.

Rick: I think it’s because you overthink it but maybe I’m mistaken here. Okay so then, let’s just add those 2 background images or those 2 images to the media library here real quickly so we can grab them. And that is gif, here we go, torn edge and torn edge bottom, okay. And then what we’re going to do is we’ll start it off with a torn edge, this one here. And we’ll come over to the Full Width Backgrounds plugin.

Kim: I’m making my notes.

Rick: And then we’re going to customize… in this case, we’re going to customize the header area and the footer area only. And in terms of the header area, we’re going to put our image in there, background image. The background is going to be black so it’s 000. We are going to repeat it horizontally. We’re going to start it at the bottom center and then we want to make our header area .page transparent so that it doesn’t cover up this background image. We hit save and actually, I believe you know, we’ve almost… come on. I thought I hit save. We might as well hit save more than once. Okay, control F5.

Kim: I want my little subscribe buttons back.

Rick: That’s because you used a bad practice.

Kim: Oh right. I thought was telling you the FTP fare right there.

Rick: Well, you don’t have to use FTP because all you have to do there is… it’s not an FTP issue. It is a div container. It’s a setting in the Thesis menu.

Kim: Well, I thought I did that already.

Rick: Oh that’s the problem. This isn’t a Full Width framework. Okay so we come over here to Thesis Site Options. Okay here’s… okay, you’re using the WordPress Nav Menu. That’s the right thing to do. So you must not have picked a menu over here for the…

Kim: Oh for my… oh my God, I think I did that wrong again. Remember the other day, you were getting on to me about the way I was picking my menu option and your… and the… what is the header widget?

Rick: Okay while you’re thinking about that, what we’re going to do here is…

Kim: I’m going to get in trouble again, I can already say this.

Rick: We need to change the framework, full width framework.

Kim: Oh okay.

Rick: With it being full width framework, now everything’s going to show up properly.

Kim: Oh okay.

Rick: Okay now, it looks like the header… you’ve got a background in the Header Widgets plugin, simple header widgets and…

Kim: I think I do have a background color in the…

Rick: Okay let’s see, so background color and image. We’re not going to customize the background style of that. So that probably solves that problem.

Kim: Because you’ve made a transparent.

Rick: Yeah, except it didn’t work.

Kim: So what about the left header?

Rick: Could be. We’ll take a look at that real quickly. Background color, yeah.

Kim: Did something come out…

Rick: Okay and the right header, that’s it, okay. So now we’ve turned off the color, there you go.

Kim: Oh my God.

Rick: See because what we did here is we you know, the image is only this tall. The image is right down here and then we’ve got a black background behind and what we said was that we wanted the image to be at the bottom of the header. And so that’s what we have right here.

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