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

Background Sizing: Part 1

5:38

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


Video Transcript

  • 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

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.