Bummer! This is just a preview. You need to be signed in with a Treehouse 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.

  • 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