0:00
Yo, what's going on guys? You're watching CSS for Beginners Lesson 45, and today we're
0:12
going to take a look at the background shorthand property. Alright guys, so in the last lesson
0:18
I showed you these different background properties. The background color, the background image
0:23
background repeat, background position, and background size. Now, I'm going to show you
0:27
the shorthand version of this so that we can combine a few of these properties into
0:32
one property. There's many different ways of doing this. I'm going to show you the way
0:36
that I like to work, and then you can take from it what you will, go off and research
0:41
yourself and then kind of adapt it to your workflow. So, the way I like to do this is
0:47
by specifying the background image properties within the background shorthand. So, I'm going
0:53
to delete all of these here. First of all, I'll copy this, and then delete all these
1:03
And what we'll do is just write background for our property. That's it. Okay? And then
1:07
we're going to write multiple values within this one property. And the first thing we
1:11
want to say is that we want to supply an image, so we'll do that by writing URL, then add
1:16
parentheses, and then paste our image in there. Okay? Now, the next thing we want to do is
1:22
say that we don't want this to repeat, so we'd write no repeat. The third thing we want
1:27
to do is specify that we want this to be in the top center. And then that's all I do in
1:36
the background shorthand property. I write the URL first for the background image. I
1:42
write the no repeat property, or repeat or space depending on what I want to do with
1:49
the image. I'll write that second. Third, I write the top, or whichever kind of coordinate
1:58
I want. And then fourth, the center, or whichever other coordinate I want. So, that's all there
2:04
is to it. Okay? Again, you can kind of adapt this to how you want. There are other ways
2:08
of doing the shorthand version, and it's all going to be on the Mozilla website. I'll link
2:12
to that down here below so you can read that yourselves. What I would say is that I would
2:17
always put your background color property separately if you have images. And I'd put
2:24
it underneath the background shorthand property. And the reason that is, is because, first
2:30
of all, if we put this up here above the background property, then first of all, we'd apply the
2:36
background color. And then underneath that, when it reaches this rule here, it's going
2:41
to override that color. And it will no longer be there. This way, we're going to supply
2:46
the background images how we want them. And then underneath, we're going to supply a background
2:50
color, which isn't going to override this, but it still will provide a background color
2:54
So I'd always do that. And then the second thing is, I'd always specify the background
2:59
size out here. You can do it in the shorthand up here, but it becomes a little bit confusing
3:05
And it's a little bit more limited, I think. So I'd always supply this separately. So if
3:10
you want to give it a width of 200 pixels, I'd do that here. So this here, these three
3:14
rules, it's exactly the same as writing the six rules that we did in the previous lesson
3:20
So let's just save that and view it in a browser. There we go, guys. Exactly the same. So that's
3:33
all there is to it. That's the background shorthand property. Use it however you like
3:37
If you have any questions, feel free to comment below. Otherwise, if you enjoy these videos
3:41
please like, subscribe, or share. And I'll see you guys in the next one
