Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Multiple Backgrounds: Part 2

Multiple Backgrounds: Part 2


In this video, you'll learn how to use CSS3 gradients with multiple background images.

Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 0:07

    [CSS3 Backgrounds - Multiple Backgrounds: Part 2 - with Nick Pettit]

  • 0:13

    In the previous video, we started on a small project using multiple backgrounds.

  • 0:17

    Now we'll add in a final background and some final details.

  • 0:22

    Just to remind you, here's what we have so far.

  • 0:24

    We've created some container styles for our wrapper div

  • 0:28

    and we've layered 2 images on top of one another.

  • 0:31

    Each of these 2 images are transparent pngs

  • 0:35

    so the background of the page or whatever background we put behind them

  • 0:40

    will show through to a certain extent.

  • 0:43

    And again, if you're following along, these images are available for download

  • 0:46

    with the code.

  • 0:47

    So let's layer on our final background and then add some finishing touches.

  • 0:53

    So I'll switch over to TextMate and here's the CSS we started on in the previous video.

  • 0:59

    We have 2 backgrounds so far and now we're going to add in a third.

  • 1:05

    Our third background will be a CSS3 gradient

  • 1:09

    and it will go behind our 2 images.

  • 1:12

    Now that we have several layers, you might be wondering how they stack.

  • 1:16

    Well, the first background you list will be at the top,

  • 1:21

    and the next background will be below that one, and so on.

  • 1:25

    The last background in your comma-delimited list will be the final layer at the very bottom.

  • 1:32

    That leads me to my next point.

  • 1:34

    If you're going to use a color or a gradient,

  • 1:37

    it's going to fill the entire element.

  • 1:39

    Because of this, you're going to want to almost always put the color or gradient last,

  • 1:45

    after your images.

  • 1:47

    This isn't a requirement, but if you put a color or a gradient before an image layer,

  • 1:53

    the image will simply be covered up.

  • 1:55

    Of course, nothing is simple, so there is one exception to this.

  • 1:59

    If you're using a gradient background that features some level of transparency

  • 2:04

    or if you're adding transparency to your color,

  • 2:08

    then you can indeed layer that on top of images and they will still show through.

  • 2:14

    Now, before we get started, I should point out

  • 2:17

    that if you haven't learned about CSS3 gradients just yet,

  • 2:21

    you may want to watch those videos first.

  • 2:23

    Alternatively, you can just use a normal CSS color in place of the gradient.

  • 2:29

    So let's actually try using a color first to keep things simple

  • 2:33

    and then we'll use a gradient.

  • 2:36

    So where our semicolon is, we'll go ahead and put in a comma

  • 2:40

    and we'll skip down to the next line and I'll put in a regular hexadecimal color

  • 2:46

    and we'll switch back to the browser and refresh,

  • 2:49

    and that looks a lot better than it did before.

  • 2:52

    However, we want to use a gradient to give this composition some depth

  • 2:58

    and some variation, so let's go ahead and do that.

  • 3:00

    We'll switch back to TextMate and we'll go ahead and delete this color

  • 3:05

    and here, we'll go ahead and type out a webkit-gradient.

  • 3:11

    This is going to be a linear gradient,

  • 3:14

    and we'll start at the top there

  • 3:19

    and work our way down,

  • 3:22

    and we'll go from white (#FFF) to a sort of light gray color (#E3E3E3)

  • 3:34

    And we'll switch back to the browser and refresh,

  • 3:36

    and now we're really getting somewhere.

  • 3:39

    We just need to add some styling to the text

  • 3:42

    and we should be done.

  • 3:44

    First, let's go ahead and position this first-level headline.

  • 3:48

    So I'm going to switch back to TextMate

  • 3:51

    and we should actually add in a flag here

  • 3:54

    just to separate out our CSS a little bit.

  • 3:57

    We'll go ahead and call this flag Content

  • 4:01

    and then we'll skip down here.

  • 4:03

    First, we want to style our top-level headline,

  • 4:07

    and we'll go ahead and really increase the font-size on that to about 3.2em.

  • 4:13

    We'll set the color to white (#FFF)

  • 4:18

    and we need to adjust the margin here,

  • 4:20

    just to position this (120px 0px 0px 50px).

  • 4:23

    We could position this other ways, of course, but we'll use margin.

  • 4:26

    We'll set the width to 300px; the line-height to 1em;

  • 4:33

    and we're going to use a webkit-transform

  • 4:36

    just to rotate the text a little bit.

  • 4:41

    Of course, you could go ahead and use whatever vendor prefix you'd like

  • 4:45

    to make it work in other browsers.

  • 4:47

    Now we'll go ahead and switch back and refresh,

  • 4:50

    and that looks pretty good.

  • 4:52

    Now, let's go ahead and finish things up and style this descriptive text

  • 4:57

    that's just sprawling across the screen right now.

  • 5:01

    So we'll go ahead and switch back, and that text has the id description

  • 5:08

    so we'll go ahead and use that id,

  • 5:10

    and we're going to also give that a width of 300px.

  • 5:17

    We'll set the font-size to 1em for now.

  • 5:19

    We'll set the line-height to 1.4em,

  • 5:24

    and again, we're going to position this using margin (70px 0px 0px 20px);

  • 5:30

    and then, we'll set the color to a nice gray color (#777).

  • 5:35

    And when we switch back and refresh--perfect.

  • 5:38

    That should about do it for styling.

  • 5:40

    Now, one thing I would like to point out

  • 5:43

    is that our code will only work in webkit-based browsers like Safari and Chrome

  • 5:49

    but only because of the webkit-gradient and a few other webkit properties.

  • 5:55

    Let's take a look at that again, really quick.

  • 5:58

    So we'll switch back here and let's look at this webkit-gradient

  • 6:02

    and this whole background property.

  • 6:05

    If you want to add other vendor prefixes for Firefox or Opera, for example,

  • 6:11

    you would have to actually repeat the entirety of this background property

  • 6:16

    and then change the vendor prefix on the gradient

  • 6:20

    to the browser that you would like to support.

  • 6:22

    And while we're on the subject of browser compatibility,

  • 6:25

    I should also point out that multiple backgrounds

  • 6:28

    will work in all the major browsers like Chrome, Safari, and Firefox.

  • 6:33

    They will also work in Internet Explorer 9,

  • 6:36

    but they will not work in any of the previous versions of Internet Explorer.

  • 6:42

    As cool as multiple backgrounds may be, it's important to have a fallback plan

  • 6:46

    If you're expecting a lot of users to be on an older version of Internet Explorer.

  • 6:52

    That about wraps things up for multiple backgrounds.

  • 6:55

    In the next video we'll learn about background sizing.

  • 6:58

    [?mellow guitar music?]

  • 7:00

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

Show full transcript


You have to sign up for Treehouse in order to create workspaces.

Sign up


You have to sign up for Treehouse in order to download course videos.

Sign up


  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.