Check out a free preview of the full CSS In-Depth, v2 course:
The "Shorthand & Demo" 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:

Estelle demonstrates how to set all the properties in order with the background shorthand, but suggests not to use it unless you fully understand the syntax and want to override all the properties. Then Estelle plays around with various properties to make a shark background change.

Get Unlimited Access Now

Transcript from the "Shorthand & Demo" Lesson

[00:00:03]
>> Estelle Weyl: So background shorthand property. The background shorthand property is image, the background position, slash background size, repeat or no repeat, background attachment, background origin, background clip. Comma, image number 2, the position, slash size, repeat attachment. Border origin and clip and then you put the color. The background color, so the color is declared on the last one.

[00:00:41] If you're using background shorthand. This is why I suggest never using this. Cuz who here has ever learned this syntax? One person. And that's one person cuz I can't raise my hand, cuz I fail. I get something wrong. So my recommendation is do not use background shorthand but you can do whatever you want but this is my suggestion.

[00:01:08] But mostly realise if you use background and you just change the background colour to blue and you use background blue, you've overwritten all of this. So if you are gonna name four of these properties you need at least four, sure, use it. But if you're just changing the background image, just use the background image property.

[00:01:26] If you're just using the background origin, just switch that one property. If you're naming lots of them then go for it.
>> Estelle Weyl: Okay, so here we can play with the shark because the shark actually has an aspect ratio and this is saying I want this image.
>> Estelle Weyl: The position is at 0,0.

[00:01:51]
>> Estelle Weyl: The size is 30 pixels by 30 pixels, repeating, scrolling, and then the clip in origin.
>> Estelle Weyl: Nope, it's origin and clip. You see, I forgot already. So play with this for 30 seconds. And just see if we actually do contain.
>> Estelle Weyl: That doesn't work. But that is a background size, no that was the origin.

[00:02:23] 0, 0, if I do contain.
>> Estelle Weyl: Okay, so apparently I lied. But I didn't lie.
>> Estelle Weyl: So remember how I said that the shark will grow if you use contain? It's actually repeating in both directions. And I think it might be because I'm using a hokey.
>> Estelle Weyl: Let's just see if I do that on the HTML.

[00:03:01] No.
>> Speaker 2: Cuz you have repeat.
>> Estelle Weyl: No, but the thing is, it should only repeat in one direction, not both.
>> Speaker 2: I see.
>> Estelle Weyl: Cuz I thought contain actually made it grow in one direction. So let's just do,
>> Estelle Weyl: What's going on here is I'm,
>> Estelle Weyl: I want to do border box and border box.

[00:03:30]
>> Estelle Weyl: And then I'm gonna put style back in. Okay, so that looks like it went from the top to the bottom. So you see it repeated in one direction, whereas before the shark had grown when I said, both of them I said contain. How many people have put a background image on a style block before?

[00:03:50]
>> Estelle Weyl: This is my first time too, kinda funny. Okay.
>> Estelle Weyl: I don't know why it's repeating, okay. So, let's do cover. Now with cover, there is no point to put in repeat, because it's never gonna repeat cuz it's always gonna take up the whole thing. And then I'm gonna put this on the style right here and so it is covering the style.

[00:04:41] But the shark is the width of my style block, right? And the reason it's cut off is because to make it that wide, it had to make it really tall.
>> Estelle Weyl: If I do,
>> Estelle Weyl: That's scary.
>> Estelle Weyl: There, my shark is eating everyone. That's cool. So I basically put it vertically at the 70% mark.

[00:05:18] And now, since no one can read it, I hope you're playing along. That's cover. What else would you like for me to do with this shark? So, here I just declared 50 pixels. So that's gonna be,
>> Estelle Weyl: The width of it, I believe. And then the height is gonna be automatic.

[00:05:48] It's gonna be auto. It says if I did auto.
>> Estelle Weyl: I could also do auto here and basically say I want it to be 100 pixels tall and I don't care how wide it has to be, just use the aspect ratio. Or, I could do 400 and just completely make an obese shark.

[00:06:15] He looks much friendlier there, doesn't he? Let's make him look super friendly. There, now he's just smiling. Okay, so that's the background properties.