Start learning with our library of video tutorials taught by experts. Get started

CSS: Core Concepts
Watching:

Using multiple backgrounds


From:

CSS: Core Concepts

with James Williamson

Video: Using multiple backgrounds

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.
Expand all | Collapse all
  1. 4m 57s
    1. Welcome
      55s
    2. Using the exercise files
      4m 2s
  2. 1h 7m
    1. Exploring default styling
      4m 56s
    2. CSS authoring tools
      2m 29s
    3. CSS syntax
      4m 45s
    4. Writing a selector
      4m 10s
    5. Setting properties
      8m 40s
    6. Common units of measurement
      7m 47s
    7. Inline styles
      5m 1s
    8. Embedded styles
      5m 19s
    9. Using external style sheets
      10m 34s
    10. Checking for browser support
      8m 48s
    11. Dealing with browser inconsistencies
      5m 30s
  3. 2h 15m
    1. Structuring HTML correctly
      2m 51s
    2. Element selectors
      4m 52s
    3. Class selectors
      6m 4s
    4. ID selectors
      3m 27s
    5. Using classes and IDs
      10m 7s
    6. Element-specific selectors
      4m 35s
    7. The universal selector
      5m 42s
    8. Grouping selectors
      4m 49s
    9. Descendent selectors
      7m 32s
    10. Child selectors
      5m 7s
    11. Adjacent selectors
      5m 30s
    12. Attribute selectors
      12m 43s
    13. Pseudo-class selectors
      3m 54s
    14. Dynamic pseudo-class selectors
      8m 29s
    15. Structural pseudo-class selectors
      6m 45s
    16. Nth-child selectors
      13m 10s
    17. Pseudo-element selectors
      12m 40s
    18. Targeting page content: Lab
      8m 56s
    19. Targeting page content: Solution
      7m 59s
  4. 42m 39s
    1. What happens when styles conflict?
      4m 0s
    2. Understanding the cascade
      5m 47s
    3. Using inheritance
      6m 11s
    4. Selector specificity
      6m 55s
    5. The !important declaration
      4m 5s
    6. Reducing conflicts through planning
      3m 33s
    7. Resolving conflicts: Lab
      6m 45s
    8. Resolving conflicts: Solution
      5m 23s
  5. 1h 47m
    1. Setting a font family
      7m 10s
    2. Using @font-face
      9m 18s
    3. Setting font size
      7m 35s
    4. Font style and font weight
      6m 52s
    5. Transforming text
      3m 58s
    6. Using text variants
      2m 49s
    7. Text decoration options
      4m 26s
    8. Setting text color
      3m 2s
    9. Writing font shorthand notation
      8m 49s
    10. Controlling text alignment
      6m 33s
    11. Letter and word spacing
      9m 11s
    12. Indenting text
      4m 30s
    13. Adjusting paragraph line height
      10m 30s
    14. Controlling the space between elements
      6m 41s
    15. Basic text formatting: Lab
      8m 45s
    16. Basic text formatting: Solution
      7m 14s
  6. 2h 1m
    1. Understanding the box model
      16m 53s
    2. Controlling element spacing
      14m 29s
    3. Controlling interior spacing
      10m 49s
    4. Margin and padding shorthand notation
      6m 27s
    5. Adding borders
      8m 57s
    6. Defining element size
      10m 7s
    7. Creating rounded corners
      6m 58s
    8. Background properties
      2m 51s
    9. Using background images
      5m 10s
    10. Controlling image positioning
      10m 25s
    11. Using multiple backgrounds
      7m 5s
    12. Background shorthand notation
      5m 25s
    13. Styling container elements: Lab
      7m 55s
    14. Styling container elements: Solution
      8m 17s
  7. 47m 51s
    1. Color keyword definitions
      5m 4s
    2. Understanding hexadecimal notation
      6m 5s
    3. Using RGB values
      4m 58s
    4. Using HSL values
      5m 17s
    5. Working with opacity
      2m 23s
    6. Using RGBa and HSLa
      3m 8s
    7. Styling drop shadows
      5m 38s
    8. CSS gradients
      6m 32s
    9. Working with color: Lab
      4m 26s
    10. Working with color: Solution
      4m 20s
  8. 1m 58s
    1. Additional resources
      1m 58s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS: Core Concepts
8h 49m Beginner Nov 22, 2011

Viewers: in countries Watching now:

In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.

Topics include:
  • 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
Subject:
Web
Software:
CSS
Author:
James Williamson

Using multiple backgrounds

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.

There are currently no FAQs about CSS: Core Concepts.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked