0:00
Yo, what's going on guys? You're watching CSS for Beginners lesson 46, and in this video
0:12
we're going to take a look at multiple backgrounds. Okay then gang, so we're here in the code, and a little bit has changed since the last
0:20
lesson. I've taken out all the content and replaced it with this single div here. That's
0:25
got an idea of banner. I've got a rule for that banner here, and I've given it a background
0:29
color of grey, a width of 100%, and a height of 300 pixels. These comments here are just
0:35
a couple of links to pictures I'm going to use in this video. So before we do anything
0:40
in the code, I want to show you what this currently looks like in a browser. And there
0:44
it is, just a simple grey background on that banner. So we're going to look at using multiple images for the background image property, and the
0:54
way we do this is by simply saying background image as normal, and then we supply two values
1:02
here. If we do it exactly the same, we say URL, and then we pass in a value, close our
1:11
parenthesis, then we do a comma, very important, and we do URL again, and we pass in our second
1:17
image in those parenthesis, then we close it all off with a semicolon. So that's two
1:24
images now, two background images. And I just want to talk about a couple of things here
1:28
The first thing is this comma here. That's very important, okay? Can't stress that enough
1:34
If you don't use that, then it's not going to work at all. It's a comma-delimited list
1:39
It has to go after every image except the last one. The second thing is the image order matters. The one that comes first is going to be at
1:48
the top of the stack. The one that comes last is going to be at the bottom of the stack
1:52
So this is going to display, this top one, over the bottom one, okay
1:57
So we've done our images there. The next thing I want to do, in fact, first of all, we'll
2:02
view this in a browser. Let's refresh here, and there we go. We've got this background
2:07
image here, this kind of code in the background, and we've got this NetNinja logo repeating
2:13
on and on and on and on. Okay, that's too much. We're going to make some edits to this
2:17
You can see here also, this little bit here is where the background image, this code
2:22
is repeating itself, okay? So we need to sort this out. So we'll jump back to the code
2:28
and we'll start applying some different properties to this. The first thing I want to do is get
2:32
rid of those multiple repetitions of the images. So we're going to say background repeat
2:38
and we'll say no repeat, comma, no repeat. What I'm saying here is this one, this value
2:46
before the comma, applies to the first image. This value applies to the second image, and
2:52
we're separating them again with, da-da, a comma, okay? Very important. However, because
2:59
they're both no repeat, these values are both the same, we don't necessarily need this comma
3:05
So I can take that out, and we don't need the second value. That one value, if there's
3:09
no other values there, will apply to both of these images. So we've got our background
3:17
repeat property. Next we're going to say background position. And the first one, I want to center
3:25
So I'm just going to write center. That's going to center it vertically, and horizontally
3:35
Then I've done my comma, and then the second image I want to place in the top left. If
3:41
I can spell. There we go. That's the banner, the background banner. So we've centered our
3:47
image on the foreground, and we've put our background image on the top left. Now I'm
3:53
going to say background size, and the logo, the first one, I want to give it a width of
4:00
300 pixels. Then I'm going to put a comma, and then I'm going to say 100% for this other
4:06
image here. And that's because I want it to take up the full width of that gray background
4:11
Alright then, so let's save that, and view this in a browser. Refresh here. Cool. That
4:17
is just what I wanted. So we've got this background image here of the code now, which is full
4:21
width, doesn't repeat. Then this logo in the middle, centrally aligned, doesn't repeat
4:27
and it's 300 pixels in width. Perfect. So that there, my friends, is how we use multiple
4:32
background images. If you have any questions about this, feel free to comment down below
4:36
I'll answer all of those. Otherwise, if you enjoyed these videos, please like, subscribe
4:40
or share, and I'll see you in the next one. Bye bye
