Check out a free preview of the full CSS In-Depth, v2 course:
The "Clip, Origin & Size" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

After showing how to clip the background color to the border, padding or content and set the origin of the background image, Estelle resizes the background image to a specific size or use cover or contain.

Get Unlimited Access Now

Transcript from the "Clip, Origin & Size" Lesson

[00:00:03]
>> Estelle Weyl: Then we have background-clip and background-origin property. So the background-clip is where do you start your background. So here, the background color on all of these is blue, but the first one has a background-clip of content-box. And so that means the background color is just starting in the content-box because this has actual padding, there's padding from the inside of the border to the blue area.

[00:00:33] The padding boxes make the content and the padding have the background. And the border-box says, actually include the background even underneath the border. So right here, I have a dotted border, so that you can see it. But normally, you would have a solid border and you might actually be missing part of your image.

[00:00:54] So if your image is, if you have a border on an element and you have an image that supposed to start in the upper left hand corner, you wanna use padding-box cuz otherwise your background is gonna start up there.
>> Estelle Weyl: The background image is missing on this, so I can't actually show you.

[00:01:14] But it's basically the background origin, is when you have what is the origin of your background image. Here, the image would start right up here. In this one, in padding-box, the image would start within the padding. And in content-box, the image would actually start in 10 pixels from the, or 20 pixels from the upper left-hand corner.

[00:01:38] Unfortunately, this image failed.
>> Estelle Weyl: And here we have it so we can show it to you. So let's play with it so you get a sense. And you can actually change this to dashed if that is easier for you to look at.
>> Estelle Weyl: And let's add a background color.

[00:02:04]
>> Estelle Weyl: Okay, that is hideous. But we're basically saying the background-origin started at the border-box. Well, why don't we just start it at padding-box?
>> Estelle Weyl: There is no padding.
>> Estelle Weyl: I just couldn't see it, okay.
>> Estelle Weyl: So the background-clip is basically the background color. Here, I've clipped it at the end of the padding-box.

[00:02:38] Here, I clipped it nowhere. And here, I clipped it at the content-box. Now, if I take the origin of that image and I bring it up into the upper left-hand corner by changing it to border, part of my image is cut off, because it's not actually drawing the background image where it's not drawing the background.

[00:03:02] Does this make sense to people? So you have background-clip, and background-origin. The origin, think of it as an image origin. And the clip, think of it as the background color.
>> Estelle Weyl: Okay, then we have background size. And I don't know why I chose something so hideous. Yeah, cuz we're making ugly stuff today.

[00:03:25] But my slide decks are prettier today than they were yesterday. So background size, we have a few values. We have auto, which is the default. It's just make the background size the size that the image was naturally. In terms of performance, that is the fastest because it doesn't have to, it doesn't have to, I forgot the word for it.

[00:03:51] I'll figure it out later. Basically it doesn't have to parse it. It parses it once and this is the image. It doesn't have to parse and recalculate it. And that is not the right term, but I can't think of the right term right now. So basically, background-size auto is the natural size of it.

[00:04:07] And then you can also say length. So if I say make the background 150 pixels, well, I basically had a gradient with a circle in it. So it's repeating, the circle stay in the same size.
>> Estelle Weyl: And this is a bad example because the circle is actually growing.

[00:04:36]
>> Estelle Weyl: We'll do a different one later on. So basically you're saying, I want my background image to be 140 pixels by 140 pixels instead of auto. And so it'll take your 10 pixel by 10 pixel image and it'll make it 140 pixels by 140 pixels. If you say, I wanna make it 10 pixels by 10 pixels, and it was actually 150 pixels by 150 pixels, it will shrink it down.

[00:04:57] Then we have two other values called cover and contain.
>> Estelle Weyl: So here is a shark, this was the original shark from SpeciFISHity, and right now, it is auto.
>> Estelle Weyl: Here it is contained. What that means is that I've taken the image and I've made it fit into the box.

[00:05:28] So it'll either shrink or grow. If it was too small, it will actually go from end to end, but it will fit one dimension, whichever dimension, but it will maintain its aspect ratio. You can also say cover, which will make it grow to take up at least 100% of it.

[00:05:47] But it will maintain in its aspect ratio, right? So here, the ends are cut off.
>> Estelle Weyl: Here, it's shrunk. However, if it was too small, it would have actually grown to be bigger. And then this one says 100 pixels by 200 pixels, and I've lost my aspect ratio,

[00:06:09]
>> Estelle Weyl: Right? So you can say, if I had just said 100 pixels wide, it would have maintained its aspect ratio. But since I declared two lengths, the width, and the height, it just listened to what I had to say, and it didn't care what the original image aspect ratio was.