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
Background Sizing: Part 2

Background Sizing: Part 2


In this video, you'll learn how to the background-size property. Specifically, you'll learn about two keywords you can use to fill the background of an element.

  • 0:00

    [?mellow guitar music?]

  • 0:03

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

  • 0:07

    [CSS3 Backgrounds - Background Sizing: Part 2 with Nick Pettit]

  • 0:13

    We've learned a little bit about background sizing,

  • 0:15

    but now let's try using percentages and a few pre-defined keywords.

  • 0:19

    There's 2 more things you should know about background sizing

  • 0:22

    before we finish up this project.

  • 0:25

    First, you can use a keyword value called "contain."

  • 0:30

    Let's change our first layer back to how we want it

  • 0:34

    and try to use contain on our second layer--this paint image right here.

  • 0:39

    So we'll go ahead and switch back to our code,

  • 0:43

    and we'll change 100% here to say 510px, which is what we want for that layer,

  • 0:52

    and for the paint layer, we'll change auto to say contain.

  • 0:57

    So I'll go ahead and switch back to the browser

  • 1:00

    and when I refresh here, I want you to watch the paint image carefully.

  • 1:05

    So we'll go ahead and refresh,

  • 1:09

    and our paint image is now much larger.

  • 1:12

    Contain will scale an image while preserving the aspect ratio

  • 1:17

    such that the image is as large as possible

  • 1:22

    while the width and height are still contained inside of the element

  • 1:26

    so nothing gets cut off.

  • 1:28

    Our paint image is sized

  • 1:31

    so that while the width is able to extend all the way across the element,

  • 1:36

    the height doesn't quite reach to the bottom.

  • 1:40

    Second, let's try another keyword called "cover."

  • 1:45

    You might already be able to guess what this one does.

  • 1:48

    So we'll go ahead and switch back to TextMate

  • 1:51

    and we'll change contain to say cover,

  • 1:56

    and we'll save that out.

  • 1:58

    And again, before we refresh, I want you to go ahead and watch this paint image.

  • 2:05

    So I'll refresh the browser, and as you can see,

  • 2:09

    the paint image has increased in size even more.

  • 2:13

    The aspect ratio has been preserved,

  • 2:16

    but it's been sized so that it completely covers the element.

  • 2:20

    In this particular case, the height reaches from top to bottom

  • 2:24

    while the width is cut off, so you can see that this image

  • 2:28

    actually reaches all the way to the bottom.

  • 2:31

    Cover and contain aren't terribly useful in practice at the moment,

  • 2:35

    but they could be useful for quickly prototyping experimental backgrounds.

  • 2:40

    In the future, I imagine that someone will come up with a very clever usage for them.

  • 2:46

    Anyway, let's go ahead and change this back

  • 2:49

    and finish what we originally set out to do.

  • 2:53

    So we'll go ahead and switch back to TextMate,

  • 2:56

    and where it says cover here, we actually just want this to say auto,

  • 3:00

    and we'll go back to the browser and refresh.

  • 3:04


  • 3:05

    Now we have our screenshot sized the way that we want it,

  • 3:09

    and now we're going to adjust our text ever so slightly.

  • 3:14

    So first, let's go ahead and look at this h1.

  • 3:19

    The first thing I want to do is actually increase the font size.

  • 3:23

    Now that we have a little bit more room, we're going to decrease this margin here,

  • 3:29

    just to reposition it.

  • 3:32

    The width we do need to increase because we've increased the font-size,

  • 3:38

    and that should about do it for the h1s,

  • 3:42

    so let's go ahead and switch back and refresh.

  • 3:44

    That's looking a lot better.

  • 3:47

    So next, let's go ahead and switch back and adjust our description text.

  • 3:55

    So we'll change the width to 320px;

  • 3:59

    we'll change the font-size and just increase it a little bit--

  • 4:03

    say 1.03em--

  • 4:08

    and then we need to adjust this margin as well.

  • 4:12

    We'll change this 20px to 55px,

  • 4:16

    and when we refresh, that's looking pretty good,

  • 4:20

    but we do still need to move this background over a little bit.

  • 4:25

    That's one thing that we did not do when we changed the size.

  • 4:29

    So we'll go ahead and switch back and we'll find the positioning for this first background,

  • 4:38

    and we'll go ahead and move it over to say 400px.

  • 4:43

    So when we switch back and refresh, there we have it.

  • 4:47

    This looks much better and we can go ahead and compare this

  • 4:51

    to our original design, and as you can see,

  • 4:55

    the new design, which is this one here--

  • 4:58

    looks a lot better because the text is lined up to our imaginary grid

  • 5:04

    and the screenshot no longer completely dominates the image.

  • 5:09

    Let's look at that first one one more time--

  • 5:12

    how we have this much larger screenshot and smaller text that's misaligned,

  • 5:16

    and here's the new version--and there we have it.

  • 5:19

    That about wraps things up for background sizing.

  • 5:21

    Remember, its okay to quickly resize a background if you're experimenting

  • 5:25

    but it's almost always better to regenerate the image so that it's sized properly to begin with.

  • 5:33

    [?mellow guitar music?]

  • 5:35

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

Show full transcript