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
Origin and Clip

Origin and Clip

6:29

In this video, you'll learn how to use the background-origin and background-clip properties. Using these new background properties, you can carefully position and cut off the backgrounds of elements.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

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

  • 0:07

    [CSS3 Backgrounds: Origin and Clip with Nick Pettit]

  • 0:13

    CSS3 offers us many new ways to modify backgrounds.

  • 0:16

    In this video, we'll learn about the background-origin and background-clip properties.

  • 0:21

    There are several different areas that reside both inside and outside the page element

  • 0:27

    when it's rendered on a webpage.

  • 0:30

    So here, we have the margin, which is outside of the page element.

  • 0:34

    Right along the edge of an element, we have the border.

  • 0:38

    Just inside the element, we have padding.

  • 0:42

    And then, towards the middle of the element, we have the content area.

  • 0:46

    Now of course, in this case, you can't see any of those things,

  • 0:50

    but in just a second, we'll change that.

  • 0:53

    Now, the first property we're going to learn about is called background-origin,

  • 0:57

    so let's go ahead and switch over to our text editor,

  • 1:00

    and here you can see we have the exact same HTML markup

  • 1:05

    as we've been using in previous videos,

  • 1:08

    and here we have the exact same CSS.

  • 1:11

    Now we're going to just scroll down here,

  • 1:13

    and we don't need the background-size property

  • 1:16

    so we'll go ahead and delete that.

  • 1:19

    We also only need a single background,

  • 1:23

    so we'll go ahead and delete our first background here

  • 1:27

    and we'll delete this one as well,

  • 1:31

    leaving us with just the paint image.

  • 1:34

    So we'll go ahead and save that out and switch back to the browser,

  • 1:38

    and there you can see we're just left with our paint image.

  • 1:41

    Now, to better highlight the border of our element,

  • 1:44

    we'll go ahead and add a very prominent border that we can see very easily.

  • 1:49

    We'll say border:

  • 1:51

    we'll give it a width of 20px,

  • 1:54

    we'll give it a style of dotted

  • 1:58

    and we'll change it to a nice bright orange color #FF9900; just like that.

  • 2:03

    And when we refresh the page, you can see that we have a nice bright border

  • 2:08

    all the way around our element.

  • 2:10

    So let's go ahead and try out the background-origin property.

  • 2:15

    I'm just going to type background-origin:

  • 2:22

    and I'm going to give it the value padding-box:

  • 2:27

    to start out with, so we'll go ahead and switch back to the browser and refresh,

  • 2:32

    and as you can see, nothing happened.

  • 2:34

    Everything looks exactly the same.

  • 2:36

    That's because by default, the background-origin is set to padding-box.

  • 2:42

    Now, what the background-origin property does

  • 2:46

    is it basically sets where the background starts to be rendered.

  • 2:50

    So if we go ahead and switch over to our text editor,

  • 2:53

    you can see that our background is positioned towards the top

  • 2:57

    and to the left, and looking in the browser again,

  • 3:00

    you can see that that is indeed where our paint image is

  • 3:04

    and by default, it is the padding of the element that sets where our background begins.

  • 3:10

    So let's go ahead and try some other values for the background-origin property.

  • 3:15

    We'll switch back over to our text editor, and instead of padding-box,

  • 3:19

    let's go ahead and try content-box.

  • 3:23

    So when we switch over to the browser and refresh the page,

  • 3:26

    I want you to watch this paint image very carefully because it's going to move

  • 3:31

    just a little bit.

  • 3:32

    So we'll refresh, and as you can see,

  • 3:35

    the paint image is now further away from the top left corner.

  • 3:40

    That's because the image is now being painted at the start of the content area

  • 3:45

    rather than at the edge of the padding.

  • 3:48

    So let's go ahead and switch back to our text editor

  • 3:51

    and we'll try the last value for this, which is border-box;

  • 3:55

    and you can probably guess what this is going to do.

  • 3:58

    We'll switch back to the browser and again, watch the paint image very carefully.

  • 4:03

    We'll refresh, and now, our paint image starts at the beginning of the border.

  • 4:10

    Now you can probably see why I decided to use a dotted border

  • 4:14

    and that's so that you can see straight through it to the image

  • 4:17

    that is now underneath the border.

  • 4:19

    So that about covers it for background-origin.

  • 4:22

    The next property we're going to take a look at is called background-clip.

  • 4:26

    So we'll go ahead and switch back over to the browser and basically,

  • 4:31

    background-clip accepts all of the same values as background-origin

  • 4:36

    and background-clip just determines where the background actually gets cut off.

  • 4:42

    So we're going to keep our background-origin property in place

  • 4:46

    and we're just going to add in the property -webkit-background-clip;

  • 4:54

    because in Google Chrome right now, background-origin

  • 4:57

    works without the vendor prefix, but you do need a vendor prefix for background-clip,

  • 5:02

    so be sure to check that when checking for cross-browser compatibility.

  • 5:07

    We'll go ahead and first give this a value of padding-box

  • 5:13

    and when we switch back to Google Chrome and refresh,

  • 5:17

    you can see that our paint image is now being cut off at the start of the padding

  • 5:22

    even though its origin is at the start of the border.

  • 5:28

    So let's go ahead and try another value.

  • 5:30

    We'll go ahead and change this to content-box; instead of padding-box;

  • 5:35

    and when we refresh the page, you can see that our background is now being clipped

  • 5:40

    even further inside of our element at the start of the content area.

  • 5:45

    So let's go ahead and try one more value.

  • 5:48

    We'll change this to border-box; and when we switch back to Google Chrome

  • 5:53

    and refresh, you can see that our image is now whole once again.

  • 5:59

    That's because any time you set background-origin and background-clip

  • 6:04

    to be the same value, you'll see the whole image.

  • 6:07

    But if you're cutting off the image further inside of the element,

  • 6:10

    then, of course, the image will get clipped.

  • 6:12

    That about wraps things up for background-origin and background-clip.

  • 6:16

    These properties, in combination with other CSS3 background properties,

  • 6:20

    give you more control over your backgrounds than ever.

  • 6:24

    [?mellow guitar music?]

  • 6:26

    [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.