Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Of all the new background capabilities that CSS3 gives us, the one that I think will lead to the most creative exploration is the ability to layer multiple backgrounds on top of each other. Combining multiple images, transparencies, and colors together affords us limitless possibilities. We will explore using multiple background images by solving what was quite a vexing problem in CSS 2.1. In our Mission page here, I have two callouts divs here, this Did You Know and Sign Up.
And I have created the textured image that I'd like to go at the very top of the callout under the header and a more solid image that I'd like to see sitting at the bottom of it. Now in CSS2, if I wanted these boxes to be able to flex and the text get bigger and the box just sort of stretch, I would have had to do some pretty fancy workarounds. I would either have to fix the size of my image and use a single background image and not be able to flex it, or I would have to add additional markup to use both of those background images.
Okay, so let's see how CSS3 can help us out. So I'm in the mission.htm and all of those div tags have IDs. One is Trivia and the other is Join. So we need to find the selectors for those in our main.css. I am going to switch over and you can find them on about line 569. What we are going to do is we are going to start adding multiple background images, so I am just going to hit Enter and go down to the next line and I am going to type-in background-image. Now you're probably going to wonder, "Hey, can I use the background shorthand notation to do what we are going to do?" Yes, you can.
Here is the thing though. Number one, we have a background color already being applied to these so we will need to specify that color in this background declaration. And the other thing is I really want to focus on the individual parts of using multiple backgrounds, so for that reason, I am going to use these multiple declarations. All right, so first I am going to do a url(../_images/callOut_top.jpg).
Now after this, I am going to hit a comma because I want multiple background images, so I just use a comma separated list here and if you're using the shorthand notation of the background property, you would do the same thing. You would do the full declaration and then a comma and then follow it again. So here I am going to do url(../_images /trivia_bottom.png), and then I am just going to do a semicolon there, perfect! Okay, now that's the background image for the trivia.
I am going to just go ahead and copy this and paste it into the join, where I just need to make a couple of small changes. The callOut_top will remain the same but the bottom image is going to change. The bottom image is just going to say join_back.png. So that's going to be bringing both of those images into our container. Right now, we would layer them right on top of each other. We will just place them in the default position of top left. That is really not what we want.
we want these both placed in different areas. So underneath background image, I am going to do background-position. Now for my first one, I want that positioned at left top, and obviously I can just type-in another comma here and do right bottom, and that's going to be the same on both of those. But before I do that, let's get down and do background-repeat while we are at it. So background-repeat for both of these is going to be no-repeat, and then finally I am also going to use a little padding on the bottom.
This is going to keep the text away from that bottom image, so let's just go ahead and give it padding on the bottom of 100 pixels. I am just going to copy that and paste it, since it's going to be exactly the same in both of these, and go and save that. Now remember we could use shorthand notation here but this does allow us to focus on the fact that we can use individual properties for these as well. I don't know if you have noticed it but we did not do two no-repeat, so what's the deal with that? Well, if you have multiple background images and there is only one property that would control them, that property controls both of them.
So you don't feel like you always have to do a comma separated list if it's just the same value. So again we are going to save that, preview that in our browser, and if I scroll down, cool beans! There is our background image. So we have our texture behind the heading, exactly what we wanted and then down below that, we have the second image. Now remember these are separate images that are occupying that sort of larger space in the bottom. And just sort of to prove how easy it's made that technique, I want to go into my source code and I am going to scroll down, so I find those guys. So in the Join section here, I am just going to add another paragraph to that.
So I am just going to close the top paragraph and then open up another one. And then inside this paragraph, I am just going to say "We are looking forward to having you as part of the Explorers." All right, so I will close that paragraph out and then open up another one so that my link there can be in its own little paragraph. So if I save this and again test this is in the browser, notice that this div tag is now taller but the images are just right where they are supposed to be.
That would have required a lot of more markup in previous versions of CSS, so that's really cool. Now we're just scratching the surface of what you can do. When I first learned about multiple background images, this exact problem here, that was the first problem I imagined them solving. I was like, please, that's going to be so easy. I have had to do that so many times in the past. So keep in mind that multiple backgrounds does mean multiple overhead, okay. So don't overdo it. You're still loading all those background images. Now other than that, I am really looking forward to seeing how people use these in their own projects and I'm certainly looking forward to using in mine.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.