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.

  • 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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">