In this session we talk about how to create unique styles by layering background images. We look at a couple of websites and discuss how the images in them are layered within elements of the site. Then we review areas of a website such as body, header and so on in which you can place your images to create a layered effect.
Rick: Okay, you’re ready. So what question would you like me to address?
Member: Yeah, in the comment box right there, I put a link to the question I asked in the forums. There’s a couple of like style visual effects in the layout of these websites that I linked to and I was just wondering how those are achieved. Can you see the link there? Do you have it saved or anything like that?
Rick: Okay, this is the forum post. Now the… now unfortunately, I can’t read that URL so I can’t actually get to that site.
Member: Yeah, that’s only an image on a design awards website. That site actually doesn’t load up live anywhere anymore. So I get… that’s what you know, the first thing I was going to try to do was like look at the css and figure something out. But that site doesn’t exist anymore but that was just the clearest example I could find. So on this one…
Rick: What about this site that you are interested in?
Member: Well, the whole main section where it has a big yellow box that says, “We build rockstar brands”, there’s two things I like about that. The first thing that it’s kind of isolated from everything around it and also, it looks like it’s positioned slightly in front of everything. I mean, I know at least in Photoshop you know, I’m familiar with layers and drop shadows and stuff like that. But I didn’t know if that was… if it’s the same type of thing to get this effect here. And also, the other thing was you see how this speaker there on the side, I didn’t know if that is like part of the border or frame of that box’s container or that’s just a background image pasted behind it.
Rick: Well, it depends on what this is. If this is a slider and these slides change then yes, these things are background images of the div that’s containing the slider. So you’ve got… probably the first thing you have here is one big image you know, that starts at this peach and goes to the black. That is the background image in the body and it just extends all the way across. Then they’ve created another… they’ve created this div or some kind of a section here for the menu and then they’ve given that another background image and that sits over the top of the body one. And then if this is a slider, call it a feature box, then they’ve got this feature box with a background image that has these speakers on the side. So that background image is really big but you don’t see very much of it.
And in fact, that background image might include this white color just like the header background probably includes this little white color.
Member: Okay so they probably just did a lot of like…
Rick: There are different layers.
Rick: Well, not just in Photoshop but I mean this is an example of that too. These are different layers of images.
Rick: And you know, the wall grave village, that’s actually a… well, let’s see. What is that? I’m guessing that wall grave… oh no, I guess that is one large image. So that’s one large image and its background is semi-transparent so you can see the main background behind it. And then so the main background’s back there in the body and then this image in the header is layered over the top of that. The image that is behind this… behind the menu you know, again, lays over the top of the body so you can see the body through it. And then the content area has got another transparent background image or semi-transparent background image that allows you to see the background through it. And each of these things layers.
And so in this case, you’ve got a layer that’s the body, a layer that’s your header over… well, so layer 1 is your body. Layer 2 is your header, your navigation menu and your feature box. And then layer 3 would be the actual feature box content.
Rick: And this layering thing automatically happens when you wrap one div inside of another. So the body is automatically the lowest layer. Are you in Thesis 2?
Member: Yeah, I’m on Thesis 2.
Rick: So then you know, layer 1 is this body. Layer 2 is the container. You know, layer 3 maybe the header and then layer 3 may be columns and footer because those are essentially on the same layer. That is, all 3 of them contained inside of the container. And then theoretically you know, you could put another container in there and that would be another layer. And so the relationship of the layers is dependent upon what’s containing something. So the main container is the lowest level. What it contains is the next level up. What that container contains is the next level up and so on and so forth. And so you can just layer background images in there and then when you finally get to your feature box where you really want to put you know, a slide that slides through there, at that point, that is you know, that’s a plugin or something that sits inside of a div that is contained inside of a div that has this picture.
Rick: There’s an analogy between Photoshop layers and you know, website layers in that website layers are just different levels of containers or different layers of containment. And the contained element is higher than the container.
Member: Sure. Yeah, that makes perfect sense. I don’t know why I was kind of like… creating something more complicated in my head. That makes sense.
Member: On the second one, maybe it’s going to be a similar answer but…
Rick: It’s exactly the same.
Member: Yeah, all of those wrapper things… sorry, ribbons… how they appear to wrap around the paper. But with this one you know, those little ribbons, they start in front but then they appear to go behind. But they’re still just layers in front, huh? That’s all they are.
Rick: Yeah, that is all they are.
Member: Oh yeah? Okay. That makes sense.
Member: Well, that’s easy then.