In this session we show how to layer multiple background images in the body of the Agility Skin using a transparent image which provides something to click on and add a title to and we demonstrate how to customize the appearance of the body background in the Custom CSS. We talk about how CSS3 and and HTML5 allow you to have multiple background images in the same container where you can significantly reduce the size of the background images using a small repeating image and a large transparent image sitting over the top of that.
Member: So this is the site here that I would like to convert to, Thesis 2.1, I answered my original question just seconds before the call and did figure out how to make my page background white, but I was really hoping that you might me help try and get some of this design into Agility. I’m specifically talking here about the header and this page background thing that they have. I do not care that much about necessarily being able to maintain that scroll facility as long as I can get that kind of background, that would be fabulous.
Rick: Well, it looks like there’s just one big image, right?
Member: Yeah, the Trish Ring Ph.D. Thought Partner, that’s an image and then there’s a background color for the entire thing. So I found the two places to set it up and you can see what I’ve done on just trishring.com.
Member: Uhuh, that’s where I’m setting up the new site. So now one of my big problems is that trishring.com that it says at the top, I don’t know how to get rid of that. This image is also not folding down to the side the way it does on the original site, the background image?
Member: And the height of it is wrong as well I think.
Rick: So, do you want people to be able to go back to the homepage if they click on this part right here?
Member: Ah, yeah, I guess that would be nice.
Rick: Okay, so…
Member: But now that I think about it, not essential because they’re already on the site anyway.
Rick: Well, but I mean, go to a homepage…
Member: Oh! the homepage, alright…
Rick: Well, what I would do then is create a transparent PNG header image. It doesn’t have to have anything in it, just plain transparent image but the size of this space here which is… what… so…
Member: Yeah, it’s probably not correct on this one, I just…
Rick: But it’s about 686×155. So that’s what i would do, I would make it 686×155 and then I would take the Agility 2 column header and tell it you want to see a header image in the left column.
Rick: Bear with me while I load up the example here.
Member: No problem.
Rick: Do you know what I mean by a completely transparent PNG?
Member: I do.
Rick: Okay. It’s just something to be able to click on and to be able to add a title to. So, let see… Thesis Manage Skins…. and activate Agility Nude. And then go to the Editor. And so you’ve already set this up so that the header is set up as Two Columns, one third – two thirds…
Member: Yes, I did that.
Rick: One third – two thirds, I’d make the left a Header image…
Rick: I’d make the right the Widget area
Member: Oh okay, I maybe didn’t set those things there, I see what you’re doing, great, thanks.
Rick: Because these are widgets, aren’t they? Or what is this? Yeah, this is a…
Member: That is a widget, yeah.
Rick: Right, so make that one a widget area and stick the widget in. As long as your image is 686×155, it’s going to take up that space right here. When somebody clicks on that, although, I guess you want that space to be bigger, don’t you?
Member: I do.
Rick: You want to come over all the way down to here?
Member: Exactly, yeah.
Rick: Okay, well let’s make it bigger than 155. So, let’s see, measure it… let’s make it 230.
Rick: Okay, that will push all this stuff down. That’s the first thing that will happen.
Rick: And then… so we’re at the top just fine… now, this image seems to be a little… oh, because you didn’t put this as the background image to the body…
Member: No, that’s the… there’s… the background image to the header? I’m not quite sure how to do this because that’s actually a pretty big image and it extends to the side with those birds and it goes down…
Rick: Right, right. So, I would make this a background image of body not header.
Rick: Not header area. I’d make it the body so everything layers on top of that.
Member: And that will… so, will put it in the header area as well…
Rick: It will put it in the header area and all the way down to the bottom.
Member: Oh, okay.
Rick: And then when you do that, you’re over here in your Skin Design right when you’re doing that? In Skin Design…
Member: Well, actually I think… yes, sorry. Yes you’re right… backgrounds.
Rick: So your Main Body Background is where you would put it. Then under Background Image Attachment, you would say Fixed – does not scroll and under Background Image Repeat, you would say no repeat. Then Background Image Position, I would put center top.
Member: Okay, now… I think I’m seeing something else that’s going on here right now, because that image is actually transparent. So, it’s a combination of that overlaid over what I’ve already put there. Now, for that kind of turquoise-y colors? So I would probably need to create one image instead of having the two that I’m currently trying to deal with, I’m guessing. Because right now, the color is just a…
Rick: So the turquoise-y… the color on the background is a…
Member: is one image and then the other…
Rick: And then the bird, the second image.
Rick: Yeah, I would combine those into one image then.
Member: And if I needed to repeat then across the entire site, because right now the background part is repeating but the other part isn’t.
Rick: Oh, perfect. Okay, so then instead of that, what you’re going to do, something that I’m going to teach tomorrow. Just for grins here, I’ll quickly, I’m going to get the URL of both of these images so that’s this one here right? And then I also have my body which… Or, this is a gradient…
Member: Yeah. I don’t know what it’s doing… yes, it’s funky thing. I don’t know what the site did when they originally set this up. Yeah, it’s called pageglare that’s the one and the other one is called page.jpg, that one is the gradient and the one at the top is the one with the…
Rick: Okay, so that is the pageglare and there’s the page image. So then… kill this. And then what you’re going to do here is none of this. I’m going to come over to your custom css and you’ll say
So the one that is on the bottom is first.
Member: Oh I see, add the second URL in there.
then background-position: for the first one is 0 0, the first one is the bottom image, 0 0 so it doesn’t need a special position. The other one needs center-top; and then
background-repeat: and the first one is repeat-x, and the second one is no-repeat; and then background -attachment:fixed, fixed; Okay if we save that custom css and go back and look at the site, we should have what you’re looking for there. Except I have that mixed up. It’s obviosly the other way around, everything’s reversed.
background-position:center-top, 0 0;
Save custom css.
So there you go. Now you have your color and your stuff in the background there. Obviously you need to move everything down over the top of it. And you’re going to want to add some background color to the page itself at that point, but…
Member: Right. Right.
Rick: But that’s how you would do that.
Member: Excellent. Is there a way I can get a copy of that css code?
Member: Thank you, you’re a life-saver.
Rick: It’s in the chat window. Now, obviously you’re going to change the location of the images, but…
Member: Right. Yes. No problem with that.
Rick: But besides that, that’s how you do it. So, css3 and html5 allow you to have multiple background images in the same container…
Rick: Unless where you can layer… Or do exactly what you’re doing, it’s significantly reduced the size of your background images by using a small background image that repeats itself and then a large, very simple background image which is simple which is what your glare is, right?
Rick: A transparent one sitting over the top of that.
Rick: And this is really a much better example of it than I was going to use tomorrow (laughs)
Rick: I might even continue to borrow this example in my session tomorrow.
Member: Oh, please do.That’s wonderful, thank you so much!
Rick: Uhuh. And then let’s see… so, once you put that image in there it’s going to push the menu down. You can get rid of the background color of the menu, you just remove that from top navigation area. Right now it’s got that color but you can just remove it. Say a transparent.
Rick: And to be quite a bit closer. If you want to emulate this system here… the menu, then you’ll use the extended menu system to give yourself a little bit of margin in between each one of these things. In between the menu item, and you’ll add the… (16:26) the system to it and let you increase the padding, that kind of stuff.
Member: Okay. Perfect.
Rick: I don’t know if you’ve looked at those aspects of the menu but that’s going to be the Main Menu – Link Supplemental Styles. This is where you can add a left margin and a right margin.
Member: Oh, great.
Rick: You’re not going to add your padding there but you can add your padding here under Main Menu, Menu Item Padding, it’s by default, 10 pixels on the top 20 pixels on the left and right but you can adjust your padding so that you’ll end up with the size that you’re really looking for here.
Rick: Because that’s how you all set this as… it’s just padding.
Member: Excellent. I feel so much better about this.
Rick: Yeah, this is the kind of thing that Agility is designed to do with a limited amount of code.
Member: So, the other thing I was going to ask, so Agility is a good theme to use for this then? Because I’m just floundering here.
Rick: Yeah. I think Agility is a great skin to use for this because it easily gives you this three sections, the footer section, the content section and the head section.
Rick: Actually, it’s really a four section because of the menu section. So you can easily kind of style these things independently whereas, it’s a little more difficult to do that in Carta.
Member: Perfect. Then, if I could push my luck a little bit, do you know if there’s an easy way to get it to scroll the way it does in the site? Because when you scroll here it actually overwrites the image at the top? I’m pretty sure she’ll be flexible about that.
Rick: What do you mean?
Member: Well, when you scroll this page the page moves up over that header?
Rick: Yeah. Well, so, will the code that I just gave you.
Member: Oh, really?
Rick: See how it stays?
Member: Wooh! (laughs)
Rick: Yeah, that’s that background attachment fix. That means the image doesn’t scroll.
Rick: The image stays in place.
Member: You’ve made my day, thank you so much.
Rick: Well, I’m so glad.