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 Silver trial
to watch this video

Sign up for Treehouse
Background Sizing: Part 2

Background Sizing: Part 2

5:38

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.


Video Transcript

  • 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

    There.

  • 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

Workspace

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

Sign up

Downloads

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

Sign up

Instructor

  • Nick Pettit

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