In this video, we're going to add this background image. And it gets all stretchy, and has a specific height, and then gets a bit smaller when it gets down to Mobile. All right, let's go and do that in this video. First thing, let's change the background color, it's currently white, in Illustrator, it should be-- with it selected, go to 'CSS Properties'. And it's going to be…

Back into Dreamweaver. And what we'll do is, we need to change everything. Remember, the everything tag is the Body tag. Body is everything we see, so we go and change that, we can change all the background color. So in 'Styles', under 'Global', we actually have a Body that we made earlier. We did it with the font for everything. So now we go to the background for everything. So, jump to 'background', 'background color'. Leave the hash '#' there, put in the color. Hit 'return', and now everything is kind of gray color.

Next thing I want to do is I want to do this big Image in the background here. So, how high is it? It is this high here, you can see, in my CSS it's given the height of the actual Image, but it's actually clipped inside of there, so that's the actual height that I want, so I'm going to grab that. So where does this go? Now, in the Design here, you can see, it's actually wrapping around my Header. So technically I should have done this first right at the beginning of the course, and then put my Navigation in there. I find that if we start with the real background stuff for the course we're getting into too much complex css too early, so we're going to do that later on, and it's going to show us how to kind of retrofit a Div tag that we should have done earlier. It's pretty easy. We just need to wrap it around this guy.

So, let's go and have a look. And it goes to the edges, I want this thing to go on for the entire background depending on how big the size of the screen is. So let's do that in Dreamweaver. Let's click on my Header. Make sure you got the Header selected. And actually, if I put it wrapped around the Header it's still going to be inside this Container. And this Container says, be, I think, 1200 pixels wide. So I don't want it to be contained in there either. That's pretty much what holds the Header in place. What I want to do is put it just outside this Container, so we need to click the Container. So, the Container selected, click here. Click in the Container. And I want to go to 'Insert' a 'Div'. And I want to wrap it around the Container.

So now, you can see down here, this is the Div, it's got no name yet, so let's go and create a CSS Class, and then we'll add it to it afterwards. So, 'CSS Designer', 'Styles', we'll make it in 'Global'. We'll create a Selector, we'll call this one 'hero-image'. And let's give it some basic styling so we can see it, so, first of all it needs a height because at the moment, this wraps around the outside of this Header because there's nothing much going on here. Just give it a height, so we can see it. And the height we got from Illustrator was that, 653. And we'll add a Background Image. So down at Images here, this is where we just did background color. Just underneath, there is a path. Click on 'Browse' for the Image. Go to our 'Exercise Files', find 'Images'. There's this one here called 'hero-background'.

Nothing's happening over here because we just created the Style, and we haven't applied it. There it is there, the Div, if you've clicked out of it you click back on this 'Div' that's right at the beginning here and apply that Class to it. So, you, 'hero-image' Awesome! Let's preview in a browser, remember, 'Save All' first. Check in the browser, and, it kind of works. So it's wrapping around the outside, it's the right height. It's just repeating. So if you have a smaller screen, you might not see the repeat but if you have a really big screen, eventually it will repeat over and over again. That's what background images do by default.

So let's go and turn that off first, and check it. So back into Dreamweaver, and let's find our background image. 'Hero-image', 'Background', and there's this option here that says 'Repeat'. Back in Repeat, click on 'None', no Repeat. 'Save All', test in the browser, awesome, so it's not repeating. The other thing I'd like you do to is to stretch to cover the edges here, so I want to keep it the same height, but I want to kind of stretch it out. There's a cool feature in here called Cover that will help you, when it adjusts it will stretch to whatever size the screen is. So let's go and look at that in Dreamweaver.

So in here, it's an option that says 'background-size', click on 'auto', and pick 'cover'. And if I hit ‘Save All', jump back into my browser, awesome. So what it's going to do now, you can see, it kind of stretches to fit, and when it gets to its maximum height it stays there. So it's always going to be nice proportionately in the background. The only trouble with this, you can see, some of that gets cropped off when it gets a bit bigger, see at the top there. Cool, so that's our Cover, what I'd also like to do is you can see, I'd like the Image to be centered. At the moment, it's kind of choosing the left as the default. And I'd like to give it a Padding at the top. First of all, let's get it to center, so in Dreamweaver we go to one called 'background-position' click on the '%' sign, and click 'Center'. 'Save All', check, now it should be, you can see, it actually works from the center now rather than sticking to the left.

Let's get rid of-- can you see, there's a border around the outside, that's true of every website, it gets created by default because the Body tag-- remember, we've styled the background color, and added a font to it. By default, it comes with some Padding. Actually some margin, that goes around the outside. That's just there by default, so we just need to override that in Dreamweaver. So I find out Body tag, there he is there. Hit 'Global', 'body', and just say up here, under 'Layouts', say 'Margins'. it has that all the way around, so we're going to link this together, and just say, just manually type in '0 pixels'. And you can see, it all disappeared. Because it says 0 there, you'll think it's set to 0, but it's not. It just means, like, you haven't done anything, so I'm just starting it somewhere, and it's starting at 0. You have to actually type in '0' and hit 'Enter'. Now we'll be part of the css. 'Save All', check in the browser. You can see, now it abuts up next to the edges.

One last thing I'll do is, I wanted that to be a little bit off the top. So what we're going to do is, there's a couple of type we can do to the Header to have Padding at the top, or because we've got this hero image already selected we can put some Padding on that. So let's do that one, let's go to 'hero image' and let's have a little bit of Padding, I'm just dragging it up. How much? I'm not sure. Check it, it's kind of okay. My only problem is that the background image is a bit dark. I might go and lighten that up later on but, hey ho, it's working, looks good.

One last thing I need to do is, if I look at my example file, you can see here, this one was actually just-- so my Tablet version is same height but my Mobile, I'll actually shorten it down a little bit because the fonts got a lot smaller, and the layers are a little bit different. So this one is this height. So, 526, let's go and put that in. So, our Hero Image is in Global what I want to do is make another one in the Mobile. So max-height, '400', 'Selectors' 'hero-image' you might have to type it in. And my height of this one, it's going to override what we've currently got, and put in… nice! 'Save All', check in the browser. Down, and then, gets a bit smaller. Nice! You might have to adjust these like-- you design this in Illustrator and, like, best intentions you're like, "That's going to be awesome," and you might have to do some height adjustments, but ours is working all right at the moment.

So next thing we need to do is add our main Content Box. We're going to do that in the next video.