Join James Williamson for an in-depth discussion in this video Using multiple backgrounds, part of CSS: Core Concepts.
- View Offline
As CSS continues to evolve, the capabilities we have around controlling elements styling continues to grow. In the case of backgrounds, recent enhancements have made it possible to now apply more than one background image to an element. Let's take a look at how that works. Now I've opened up the multiple.htm file, and you can find that in the 05_11 folder. I just want to preview this in our browser first to kind of show you what we're looking at here. So we've got these two banners and we've got some text over at the top of the banners that doesn't look all that good, so we're going to fix that in just a little bit.
What if, for example, you had a list of galleries like this, and then every now and then you wanted to let people know whether there was a new gallery on the page or whether one of the galleries was a Featured Gallery. Often time you'll use little icons or ribbons or banners to do that. So I'm going to bring up a couple of graphics here that I've created just for that purposes. I've created a little ribbon here for the Featured Gallery. This is a transparent png file, and then I have this little transparent badge that says New, so when something is a new gallery, so these are the images that we're going to use. Now the wonderful thing about being able to use multiple background images on an element means that I can basically mix and match these images and I can just go ahead and say okay, not only I do want this banner as a background image, but I also want to place this ribbon on top of it as well, and that prevents me from having to make so many different versions of this banner graphic, for example.
I can just keep that image and then just put stuff on top of it when I need it. So this is a really functional capability. So what I'm going to do is I'm going to go back to my code here and you can see we have a div with the class of banner1 and banner2, we have our text inside that and we just have some pre- existing styles for our background images that are very similar to what we've been working with in the past few exercises. So how you do multiple backgrounds? You use a comma separated list on all of the properties that you want to apply this to. So, for example, our first banner graphic, I'm just going to come in here and say, URL and then open up a parentheses and then inside that I'm going to say, (_images/featured.png), close my parentheses, and then and this is extremely important, I am going to do a comma.
So essentially you have a comma separated list of multiple images that you want to use. As far as white space goes, it doesn't really matter. If you want to make this more readable for yourself, you can add a white space there or not. What is important is the comma, without the comma this does not work, so make sure that comma is there. And the stacking order matters as well. The last image in the list will be at the bottom of the stacking layers and then the first image in the list will be at the top. So make sure that the image that you want to have on the pop of everything is the first one mentioned.
For your other properties you can go ahead and pass in multiple values as well. I want both of these to not repeat, so I don't really need to worry about adding another one to this one, I could if I wanted to but it's really kind of overkill. If there's no comma separated list here, then the same value will be applied to both of these. Now on the other hand for background position, I don't want this left top, so what I'm going to do is again right in front of left-top, I'm going to go ahead and type in (0 25pixels) and then a comma, so that'll be positioning it horizontally at zero, so right it begins at the left edge and then 25pixels down, whereas the banner is still going to be positioned left-top.
And if I save this and preview this again, you can see right there our Featured Gallery just comes right in, isn't that not cool? That is really neat, our Ribbons are just coming in and it's positioning itself exactly where I want it. What I'm going to do is I want to move the text down below the image, and I'm going to put a background color back there and position it so that it sort of looks like it's a caption of our image. Now in order to do that we have to keep in mind that this is one big element, the text and the image belong to the same element, so what I'm going to do is I'm going to go up here to our div tag and I'm just going to change some of these values.
The first thing I'm going to do is I'm going to push the text down by using padding. So I'm going to do padding, and we do padding of 175px, now why did I choose that that value? Because 175px is how tall the image is, so it's just going to push the text down. Padding will allow the image to still show, but it's going to push the content down, so (175px 00 15px). So what that is 0px for right at bottom, 15px for left. Now I have to go up here and modify these guys a little bit too.
The width of this, for example, I'm going to take down to 470, and that's going to compensate for this left padding that I applied. I'm going to change the height to 40px? Now why 40px? Because 40px is actually the height of the box that I want to text to wrap around. Now I know that sometimes it's hard to get your mind wrapped around, but I'm giving 135px worth of padding up top to give the room for the image, and then I still have 40px worth of height, remember, they're cumulative for the text. I'm also going to go ahead and do a line -height here of 40px as well, save that and preview it, and it's doing exactly what I wanted to do with my text, so just got that out of the way.
And I want to go down to banner2 and play around a little bit with that as well. So here in banner2 I'm going to add another image, I'm just going to do some copying and pasting here. So I'm going to do copy, paste of your URL, remember my comma, and then instead of Featured, I'm going to change that to new.png. And again, instead of the left top, this one is going to be positioned at (right top,) So if I save that and test it, my new badge shows up in the top-right-hand corner exactly where I wanted to be.
And you can play around little bit with those settings, you're not limited to two, if I wanted to, I could come up and grab this little guy and paste him in banner1, another comma to separate them, and again, I can do top-right here as well, and another comma. So as long as you're passing in values for each one of these or passing a single value if you wanted to apply to all of them, you're really in good shape. If I save this and test it, you can see that now that shows up there as well. So you can just go ahead and throw in as many of those as you want.
It won't take you long to kind of think about this little bit and realize just how powerful that is. I mean it gives you an incredible amount of freedom in creating a page's visual design. Both of these elements right here are a single element, they are one div tag with text inside of it, but look at all of the layering and all the really cool effects that we are doing here to these multiple background images. I need to mention that support for multiple backgrounds is fairly widespread in most browsers, except for Internet Explorer. Prior to IE 9, multiple backgrounds were not supported, so you if you're going to use these, you still probably will need to have a strategy for dealing with earlier versions of Internet Explorer.
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows