Build Your Own Business Website header image

Where to Put Background Images in the Thesis Full Width Framework

In this session we discuss where to put background images in the Thesis Full Width Framework and get them to tile down the page outside the header, content and footer area. We discuss the things that need to be considered in styling when using the Thesis Full Width Framework. For example, If we want to see the body color showing up in the page area, the page and content area should be transparent. We also discuss that specifying the height of the content area affects the header area thus expanding and pushing the header away because it needs to be taller to take its content.

Video Transcript

Member: My next question is I’m just starting to use this… what do you call it? Full Page Full Framework plugin?

Rick: The Full Width Backgrounds plugin?

Member: Right.

Rick: Okay.

Member: Okay my basic question is when you design an image and I looked at your videos on this and I think I understand how it works. We’re going to see here when I get this done but if I just want the image…whatever I wanted the image… if I just want that to roll outside you know, I think the word is tiling down the page outside of the header, the content and the footer area then you know, in that area, let’s say my page is that area is 900 pixels wide. Then that 900 pixels in the center of that backgorund image would be the same color as my outside background color that I set up in Thesis and then… so that outside of that area, I would put those images that tile down the page. Is that the way it works?

Rick: Well, you’ll have to think… I mean, the best way to hink about this is as in layers. You know so the bottom-most layer of the page is the body and the body contains every other element. This is a full width framework page that you see right here, this demonstration page. And it’s got obviously a header and a footer content in the sidebar. And thi sis the browser window, right? This is the background. This is, for all intents and purposes, the body which is it spans from one edge of the window to the… from side to side and from top to bottom. And absolutely everything inside of the browser window is the body.

And then over that body is the page. And so the page is defined as you just you know, inside of the Thesis Design Options by giving column widths. And that’s the width of your page is defined by column widths plus margin and padding that Thesis adds. And the height of your page is defined by your content. So if you have very little content, the page is only going to be as tall as your content. In this graphic here, we only have enough content to get down to the bottom of this page but the browser window is actually taller so it shows body below the bototm of the content because the page is only as big as the content needs to be… as it needs to be in order to cotnain the content but it is as wide as is defined in Thesis Design Options.

So then you have this division of… in the Full Width Framework of your header area, your content area, and your footer area. These 3 things spans from left to right of the browser window. So similar to body, they go from one edge of the browser window to the other. But not similar to the body, they’re not… they don’t span the full height. They only span as far as necessary in order to contain the content in it. So the header area’s only as tall as it has to be. The content area is only as tall as it has to be. Footer area is only as tall as it has to but it’s always as wide as the browser window.

So on top of that then, you have the next layer which is header area .page, content area .page and footer area .page which is only as wide as defined in Thesis Design Options and is as tall as needed for the content. So you’ve got the body which is absolutely everything, left to right, top to bottom. You have the header area, content area, and footer area which layer right over the top of the body and they are full width… they span the full width of the browser window but… and are as high as necessary in order to contain the content. And then you have the header area .page, content area .page and footer area .page which lay on top of the header area, conten area and footer area. And they span as far as defined as Thesis Design Options horizontally and they expand vertically to take up whatever content there is.

So when you’re styling the Full Width Background, you’re actually styling… you’re potentially styling 7 things. You’re styling the body potentially, the header area, header area .page, content area, content area .page, footer area and footer area .page. So you have those 7 things to consider. When you… if you put a style for the body, you will… and you want it to show you through the header area, content area, and footer area then you need to make… use my plugin to make the header area, content area, and footer area transparent because otherwise, they will cover up the body because they’re the layer over the top.

Same thing is true with the .page. If you’ve got something in the header area that you want to show through the page then you have to make the header area .page transparent so that you can see what’s below it. Otherwise, each one of these layers will completely cover the layer below.

Member: Yeah so in your example right here, I just have 2 quick questions. I think I’m… I don’t fully understand the terminology but I understand how the layering works. The… if you want images, let’s just say you want images to tile down in your diagram, you want to be in the blue, the gold, and the green area outside of that header area, content area, and footer area page that are defined by Thesis by how wise you make it then the design of that would be similar to the one on your videos where in that interior area, the header area page, the content area page, and the footer area, I think you had like just a solid black. And then outside of that, you had the blues, spirals or whatever. And so when you do that, you tile the image down the body image then what happens is you’re going to have that design going to the outside of the header content and footer area pages. But then if for some reason, something happens that it’s not set up right then that’s when the body color will come through on the area page. Does that make sense?

Rick: Yeah well now the body color can only come through and show through the page if the page is transparent and if the content area is transparent. Otherwise, the body area, the body color simply can’t show in… through this… through the page.

Member: So it’s actually the two layers that have to be transparent, right?

Rick: If you want to see the body color in the page area then you’ve got 2 layers that have to be transparent – content area and content area .page.

Member: Content area and content area .page, gotcha. And the .page is the 3rd layer, right?

Rick: Yeah.

Member: Okay so… and if you want images to roll down or to tile down you kow, outside on the area… outside of the header area page, outside the page area then insdie the page area, if you don’t want those images to show up, you just make the solid color that you want your background, is that right?

Rick: Yeah. You don’t have to do anything. If you don’t want… if you don’t want it to show through the page, there’s nothing you need to do to the page because the page, by definition, comes as a solid color. That’s the color you defined in Thesis Design Options.

Member: Okay.

Rick: You actually ahev to do something active to make that page transparent.

Member: But you’re going to have an original image that you’re designing for the body.

Rick: Yeah but it… but the body image is only going to show if the stuff covering it is transparent.

Member: Right.

Rick: And the stuff covering it, by definition, is not transparent. So you actually have to take an action to make it transparent if you want it to show through. Otherwise, it’s not going to show through.

Member: I got you. Okay, I think I understand how this works. I mean, I’ll have another temporary problem but I’m… I’ve got my… between my header area page and my content area page, I have a… the background color coming through across the area page had… across th page area you know, maybe like 10 pixels of whatever, between the header and the content. Now I really don’t know why that’s happening.

Rick: That would happen probably because you’ve defined a margin some place that separates the…

Member: Okay, I’ll look at that.

Rick: The… I mean, it could be that or it could be that you’ve given a very specific defintion to the height of the content area but the header area needs to be taller in order to take its content. And so the header area is natrually expanding even though you’ve given it a specific definition. So it could be one of… you want to share your screen?

Member: Sure, if you want to take just a quick look at it.

Rick: Yeah, okay.

Member: Do you see it? Obviously, this header’s not done. I mean, that’s wider and I’m trying to get rid of the…

Rick: Yeah, this brown line, you’re talking about the brown line between the header and the content there? That’s definitely caused by some kind of a margin that’s been set… Junior’s Junction, I’m going to make myself the presenter here for just a second so you can see this.

Member: Okay.

Rick: Show my screen. Let’s see, Junior’s Junction, Okay so you’ve got this little brown strip through here and…

Member: I probably did set a margin on there because…

Rick: Well, the margin is not jumping out at me at the moment though. I got to find where that margin is.

Member: Like you say, it’s trial and error.

Rick: Yeah. Okay so the margin that you have is actually on the menu. So you created a top margin for the menu and that top margin of the menu is pushing the header area away from the content area.

Member: So it’s in the nav menu plugin.

Rick: It’s in the nav menu plugin, that’s right.

Member: Okay great. That answers my question. I appreciate it. Thank you very much.

Rick: Okay, you’re welcome.

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