Build Your Own Business Website header image

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.

Part 6 – Using Multiple Background Images in the Same HTML Element

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that you’ve seen how to add a fixed background image in a Thesis 2 skin, the next thing we’re going to demonstrate is how to put more than one background image in a container.

Add Another Background Image

I have a background image that I’m going to layer over the top of this body background image that is a transparent image that’s got some birds and a logo and that kind of thing on it. I’m doing this not because it fits in the site but just to demonstrate how this system will work. Let’s come back over here and add the image, pageglare, add it. Then come back over here.

Using Multiple Background Images in the Same HTML Element

The way it works when you add multiple images is that we’re just going to add a comma and a new URL. So url paste that in there just like that and then we also have to do the same thing with the position and then the comma separating each set.

Adding Multiple Values for Positions

If you didn’t put center top, no-repeat and fixed for this image, it would take the default which would mean it would be top left. It would be top left and repeat and scroll if you didn’t put a second set of values in here. So when you put multiple images you need to put in multiple values for the positions that you specified for them as well.

Let’s save our Custom CSS here, come back over and reload this. And nothing appears to have happened and the reason nothing appears to have happened is because one image is being covered by the other. Right now the topmost image is the first image specified.

Order of Images is Important

And this is why I wanted to demonstrate it for you this way because the first image specified is the topmost image and then the second image is down a layer and the third image would be down another layer and so on and so forth.

So since this is the one I want on the bottom and this is the one I want at the top, what I need to do is take that out and move it into the first position in the list. Now with it in the first position in the list, you can see the flock of birds flying and the logo in the background and so on and you can see that it doesn’t move.

Actually, it would be kind of interesting to have that scroll wouldn’t it? So if we went to this background-repeat and our background fixed and said scroll for that one then you can see the image scrolls up with the page, right? And we could say background-position:center bottom; for this image and it moves the image down.

Specifying Parameters for the Images

So that’s how you can have multiple background images in the same container where the first image in the list is the topmost image and the last image in the list is the bottom most image. For each image you specify, you have to specify the same set of parameters. So you can’t specify background-position for one and not specify it for all of them.

You don’t have to specify it for any of them but you can’t specify it for one without specifying it for all. So that’s how you use multiple background images and we’re going to go back to our single background image here. Obviously, the multiple background image thing gives you a chance to do some pretty cool things really.

You can make some very nice things and in particular, you can make much smaller image sizes. That glare image was actually a very small image because it was very simple and primarily transparent. It only had a couple of colors in it and it was primarily transparent so it didn’t take up very much room. If it had a blue background as big as the image was, it would’ve been a huge image. So it’s a way of being more efficient with image delivery; it has lower bandwidth requirement.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment