Adding Background Styles

[00:00:00]
>> So the very last step here for this web page is we need to make our very cool jagged looking edges here. So we have this awesome effect here with these jagged edges, right? Which is part of the sizzle of this particular design. We've got some up on the top and we've got some down here on the bottom, and they look absolutely amazing and and everybody wants to know how to do that.

[00:00:28]
Well, we wait until the very end to do it because we're going to do this with background images and we need to make sure everything is lining up here within the webpage itself. So, here is the way we are going to go through that process. So it is possible to have more than one background image on the same element.

[00:00:47]
This was my learning experience when putting this course together. I did not know that you could have two background images together on the same element. But it is in fact possible, and it's gonna make this whole thing work. So what I have created for you is the little bit of that background image that's going to give you alternating little bits of white and little bits of transparency to let the other section shine through.

[00:01:15]
And we need now to assemble this so that we have two background images on the same section. So, I'm going to start here in your featured section with the section featured style. So for me it's around line 373 in your CSS. Hopefully for you, it's kind of similar.

[00:01:37]
So the way we're going to set this up is as follows. We have a background image here. Right now, this is called fem-feature-bkgd.png. This is that white background with the gray stripes in it, okay? So that's the first thing. We definitely need to keep that. What we're going to do is add to this, url and we're gonna say ../img/fem-feature-bottom.png.

[00:02:13]
And then a comma, and then the other image that was here, url ../img/fem-feature-bkgd.png. So in other words, we have two of these together. Those quote marks are actually kind of optional. We make them match, okay? So we've listed two background images together in the same declaration separated by a comma.

[00:02:39]
The order does matter because we want the bigger image, the one with the stripes, we want that on the bottom, and we want this particular image on top of that. So we're gonna list it second. Then of course, for background repeat and position, we can put a comma and set up the second set of parameters for that.

[00:03:00]
So in this case, we're going to say repeat-x, repeat. So for the first image it will repeat only in the x direction which is what we want for that jagged line but the other image will repeat in both the x and the y directions. For our background position, we're going to say bottom center, center center.

[00:03:29]
So, we want this skinny image we want down at the bottom of the featured section, and we want it to be centered, whereas our background image will be centered as well. And then of course, we have our padding here. Okay, how are we doing so far? Okay, so now let's take a look at our webpage.

[00:03:53]
If we refresh, and scroll on down to the bottom. Check it out. It totally worked. So the takeaway from this is that you can have more than one background image on the same class slash the same container on your webpage. The ordering of those background images definitely matters.

[00:04:13]
You want the one that is going to appear in the background, that's the first one you want to list. And the one that's gonna appear on top of it, that's the second one that you list. And then you can use your other background properties to list, again, comma-separated values for those particular images, okay?

[00:04:33]
Okay, so the next one we're going to do is add this to the intro style. So we're going to go back into layer intro, and we are going to add this at the intro image up here on the top. And the first thing I'm going to do is change my padding just a little bit here, I'm going to say 4rem 0 10 rem 0, okay?

[00:05:02]
So in other words, give me a little bit of extra room down on the bottom of that intro image. I have two images, once again, so the comet image is going to actually be listed second this time, and the first image that I'm going to list is url, And this one will be ../img/fem-featured-top.png.

[00:05:43]
So that is that first image and then we'll have our second comet image, okay. Hit return on that. Then for the background repeats, we want the first one to repeat in the x direction, no-repeat. For background position, we want the first one to be bottom center, and then 86% 10%.

[00:06:27]
Okay. So on the intro, we have double background images as well, okay? And once you've done that, we should be able to save. And then take a look at your Frontend Masters page here. And when we refresh, you should have your jagged image up there on the top.