Build Your Own Business Website header image

Background Image that Spans Both Header Area and Content Area

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 we discuss how to locate a background image so that it spans both the header area and content area. We examine the area in question in Firebug and talk about both where and how the image needs to be positioned. We also talk about how to position the sidebar content in a widget so that it doesn’t interfere with the background image.

Video Transcript

Member: I gotta a little say, I’m working on here but it just turns into a complicated thing. But I’m sure it’s basic in your eyes. I don’t know how to get you there, that’s the thing.

Rick: Which site is it?

Member: Get A Man to Commit Now. I think I posted it a few times in the forum.

Rick: Yeah, I’ve been here. Okay.

Member: Okay, alright. See the red header below the paragraph there? I included that in my image just so that they… because what I did, I attached the arrow to… I made that border as an image. So when I post… when I have my content in there, it goes below the arrow. So I mean… that’s… and I can’t seem to find our or learn a way how to get you kow, the top paragraph part of the content. So… I mean, what you see in the.. you know…

Rick: The way I would handle this is I would take this line and this arrow and I would make that a background image of… well, let’s see.

Member: Well, that’s in the… that’s an image separate right now which is in the… was it the Full Width Header Image plugin, I believe? It’s not in the custom body image.

Rick: Yeah but what I would do is put it in a body.

Member: Okay. Now the arrow in the border as an image…

Rick: As an image, I would put it in a body without the text and then I would position it so that it was where you want it vertically. So you would say you know, it’s down… well, you’d center it so you’d be… and then it would be down what, 97… oh no, it’s down here… down say, 140 pixels or 150 pixels. So I would position it so that was down 150 pixels and centered. And then… or down whatever it needs to be so that it lines up below the header and above your content so it goes in between.

Member: Okay, in the body custom.

Rick: In the body custom, right. Because the thing is that you know, right now what you have is you have a header area that’s like this size and then you have a content area that is this size. And if you put this as a background image in the header then it can’t cross into the content. But that’s what you want it to do so it’s got to go back a layer. The body is the entire space and so you’re not crossing any boundaries if it’s in the body.

Member: Okay, I see.

Rick: So that’s why I suggested you put this in the body. Now what’s going to happen though is that then this sign up “Discover the 7 reasons why men find it difficult…” that’s going to pop up all the way to here, right? Because it’s going to come up to the top. So what you’ll need to do is you’ll need to create a widget style that gives this widget a really tall top margin and moves this widget down.

Member: Okay, alright. Okay, I see. I see.

Rick: Alright. Have you used the Widget Styles plugin yet?

Member: Yes, I actually have.

Rick: Okay. So you would just make it a widget style and in the top margin, you’d say give it you know, what is that? That’s going to be about 200 pixels. Give it a 200 pixel top margin for that style and that will push the widget all the way down.

Member: Great. I see, okay.

Rick: And it’ll only affect that widget style right? So it won’t affect any other widgets you might have on the page and just affect the one that you’ve given that style. And then what I would do is take this “Discover the 7 reasons why men get cold feet.” and that would make that your title of your page.

Member: In the… on my page itself?

Rick: In your page itself.

Member: Okay, right. That’s what I want to do.

Rick: That’s essentially…

Member: So when I go to another page…

Rick: That’s what we do here is that this is the title of our page right there.

Member: Okay.

Rick: We’ve got all these other things going on in the page but this is our page title.

Member: Okay, alright.

Rick: And you can see that when you look at Edit Page and look at this really long title, right? With HTML and line breaks and all kinds of stuff going on in there to make it look the way I want it to look.

Member: I see, okay. Makes perfect sense now. Okay alright. Now let me ask you another question in the header. I’ve been watching how to alter the image on separate pages on the header image, would that… would this be possible to do on this? They’re all transparent except for the left image. It’s not transparent but I could make it transparent.

Rick: Well, do you want a different header image on each page?

Member: Well, I want to get rid of the arrow. That’s the thing.

Rick: You only want the arrow on some pages.

Member: Well, just on this page and that’s it. That’s it. I would like to. I don’t know if that’s… you know?

Rick: So the arrow, you only want the arrow on the homepage? You don’t want the arrow anywhere else.

Member: Right, right.

Rick: Okay well, I’ll tell you, I would change all my advice. I thought you wanted this everywhere. What I just suggested that you do you know, would happen everywhere on your site. If you don’t want this everywhere on your site then I would go back to your other plan that had this as a border and I would put this arrow as an image in your… in a widget. And then I would use…

Member: In a sidebar widget?

Rick: In a sidebar widget and then I would use some custom CSS to push it up so that it covers the border like this.

Member: Okay.

Rick: But it’s only going to happen in this one case. It’s never going to happen anywhere else.

Member: Yes, that’s what I’m looking for.

Rick: So you want this to happen everywhere, this “Get a man to commit now.” You want that to happen everywhere. You want the line to happen everywhere. You just want this red arrow only on one page.

Member: Correct.

Rick: I never understood that when we were talking about this on the forum. I didn’t get that.

Member: Okay. So the border would be an image by itself.

Rick: Yeah, the border… remember when you used to have this set up? You used to have it just set up as a border of the header area.

Member: Yeah, that was a border in the plugin that I used. It made it but this was an image itself so I mean, the border was part of the plugin, I should say.

Rick: Yeah but you’re still using that plugin.

Member: Right.

Rick: So you can still use the border. I would just go back to using the border. You wouldn’t use the image for it anymore. Go back to using the border. Actually, what you really do is you go almost all the way back to where you were when you first asked me the question. And then you use something that I just talked about earlier which is absolute and relative positioning just to take this one widget and move it so it moves up where it doesn’t belong essentially and covers the border with this image.

Member: Okay, alright.

Rick: Which is what I did when I made that little image for you, right? When I said, “Is this what you mean? You want it to look like this?” The way I made that happen was by creating a little bit of CSS to shove the thing up into place.

Member: Okay, alright.

Rick: And if you back to where you were at the very beginning and asked me for the code, I’ll give you the code to put you in your custom css file and move that up.

Member: To place that up? Okay alright.

Rick: Because you can do that… I mean it’s… it doesn’t… it’s not a very useful feature if you want to use it on every page. But to the extent you want to use it on only your homepage, it’s a perfectly acceptable solution.

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