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 1

Background Sizing: Part 1


In this video, you'll learn how to the background-size property. You'll also learn an alternative method of managing background layers.

  • 0:00

    [?mellow guitar music?]

  • 0:03

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

  • 0:07

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

  • 0:13

    In the last 2 videos, we got started on a small project

  • 0:16

    using multiple backgrounds.

  • 0:18

    Now we're going to use another feature of CSS3 called background sizing.

  • 0:23

    Background sizing works very similar to image resizing in the browser.

  • 0:27

    The difference is, of course, that you're resizing a background image

  • 0:32

    rather than an actual image on the page.

  • 0:35

    Now, this design is looking pretty good,

  • 0:38

    but let's say that we wanted to show it to a client

  • 0:42

    and they wanted the image smaller and the text bigger.

  • 0:46

    We could pull out Photoshop and reformat the image

  • 0:49

    or we could make a quick adjustment to the background size,

  • 0:54

    even if it's just to prototype it,

  • 0:56

    so let's go ahead and resize this screenshot.

  • 1:01

    So we'll go ahead and switch over to TextMate

  • 1:04

    and in the last 2 videos, we created our background using 3 different layers here

  • 1:12

    on a single background property.

  • 1:15

    I mentioned that there are 2 ways to do this:

  • 1:19

    the easier, less confusing way is to do this,

  • 1:23

    using the consolidated background property.

  • 1:27

    However, it's important to learn the other way, too,

  • 1:29

    in case you come across it, so I'm going to type out the background-sizing property

  • 1:34

    and then explain what's going on.

  • 1:36

    So we'll go ahead and drop down to the next line here,

  • 1:39

    and I'll type background-size:

  • 1:44

    and I'll type 510px for my first value,

  • 1:49

    auto, auto;

  • 1:52

    So that was easy, right?

  • 1:54

    Just one line of code.

  • 1:56

    We'll get to the specifics of actual background sizing in a moment,

  • 2:00

    but first, let's figure out how this relates to what we already have.

  • 2:06

    We have 3 background layers here

  • 2:09

    with values for each layer separated by spaces

  • 2:14

    and the complete layers separated by these commas.

  • 2:19

    If we want to add values to any one of these layers

  • 2:23

    using a separate background property

  • 2:26

    such as background-color, background-repeat, or background-size,

  • 2:31

    which is what we're using in this case, we need to provide a value

  • 2:35

    for each of the 3 layers and separate them with commas.

  • 2:40

    So in our background-size property,

  • 2:43

    the first value corresponds to the first layer

  • 2:48

    in our background property.

  • 2:50

    Then, we have a comma to indicate that we're ready to move on to the next layer,

  • 2:55

    and so on.

  • 2:56

    Now that we have that out of the way, we can talk about the background-size property itself.

  • 3:02

    By default, the background-size property is set to auto,

  • 3:06

    which basically means do nothing--just leave it at the default.

  • 3:11

    If you provide a pixel value for one of your backgrounds as we've done here,

  • 3:17

    then the background will be resized so that the width of the image

  • 3:22

    matches the value, but the aspect ratio will be preserved.

  • 3:27

    So let's refresh the page and see what happened when we made our changes.

  • 3:33

    There we go.

  • 3:34

    Now, what if you wanted to adjust the width and height of this image

  • 3:41

    independent of one another?

  • 3:43

    That's easy, too.

  • 3:44

    We'll go ahead and switch back to our code,

  • 3:46

    and all you have to do is put in 2 values for the background that you're trying to adjust

  • 3:54

    rather than one.

  • 3:56

    So first, we'll actually change this width to 400px,

  • 4:00

    and for the height, we'll change it to 491px.

  • 4:06

    The first value is for the width and the second is for the height.

  • 4:11

    So let's go ahead and refresh the page.

  • 4:15

    And, as you can see, when we use 2 values,

  • 4:19

    we have full control over the height and width

  • 4:22

    and we're not bound to the original aspect ratio of the image.

  • 4:27

    Now, we don't have to use pixel values.

  • 4:30

    We could also use percentages,

  • 4:33

    so let's go ahead and try that.

  • 4:36

    I'll go ahead and change this to say 100%

  • 4:42

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

  • 4:46

    and this looks pretty odd, so what is actually going on here?

  • 4:50

    Well, we set the width of the background to be 100%.

  • 4:56

    We did not set any kind of height, so that's also assumed to be 100% in this case.

  • 5:02

    But 100 of what?

  • 5:05

    Well, in fact, it's 100% of the element

  • 5:09

    that the background is being applied to,

  • 5:13

    which is this large div here.

  • 5:16

    The reason it's not filling up the entire div is because we've also positioned this image

  • 5:23

    to be down and to the right.

  • 5:26

    We've started learning about some of the mechanics of background sizing,

  • 5:29

    but there's still more to learn.

  • 5:31

    In the next video, we'll finish things up.

  • 5:33

    [?mellow guitar music?]

  • 5:35

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

Show full transcript