Backgrounds

Quick reference

• 00:05 Okay, in the last video we talked about colors.
• 00:07 In this video I want to talk about backgrounds.
• 00:09 And backgrounds are similar to colors.
• 00:11 Whenever you have something and you want to change the color of the background, or
• 00:15 you want to add an image as a background, that's what we're talking about here.
• 00:19 To change the color of a background let's come to our H1 tag here.
• 00:22 And we just type in background dash,
• 00:25 and you can see we've already got a bunch of suggestions here.
• 00:29 So we want color and let's use our hex code and let's call this CCCCCC.
• 00:34 So if we save this and come back in here, reload, boom.
• 00:37 We have a background of this gray color, so that's pretty easy.
• 00:41 What if you want to use an image as the background?
• 00:43 Let's see I'm going to grab just some image of me hiking here and
• 00:47 i'm just dragging it from my desktop.
• 00:49 And I'm gonna come over here and highlight this top directory and just drop it and
• 00:53 you can see it uploads it for us.
• 00:56 Now to use an image as your background we just change this, I'll actually erase this
• 01:01 we call this background image give it a semi colon and then.
• 01:05 We see it's already suggesting for us, we type in this URL and
• 01:10 then we type the website address to this image and
• 01:14 this image is hike.png, and then we go ahead and close that.
• 01:19 So if we save this and hit reload you can see it starts to put it in there.
• 01:24 This is not a very big area, so you can't really see all of the image.
• 01:28 But you could see it's definitely doing something here.
• 01:30 Actually, let's see if we can come back here and
• 01:33 I'm just gonna type in some line breaks.
• 01:38 And paste those, hit save and then reload.
• 01:42 So okay, so I made this a little bit bigger.
• 01:44 And you could see it's using this image as a background.
• 01:47 Me hiking outside of Las Vegas up in the mountains there.
• 01:50 But you can see it's sort of weird.
• 01:51 It's scaled kind of funny and it's repeating here.
• 01:55 So what happens is CSS tries to smush this image in to the area but
• 02:00 it has to guess what to do.
• 02:02 Well, we can actually change that.
• 02:03 Come back to our CSS file.
• 02:04 By telling it exactly what to do.
• 02:07 And we can do that several different ways.
• 02:09 First, we want to look at the background repeat tag, and
• 02:11 that's just background dash,
• 02:15 and you can see it already it's suggesting things, repeat, position, image.
• 02:20 So we want repeat.
• 02:22 And let's say no repeat.
• 02:26 If we save this and come back and reload.
• 02:28 Boom.
• 02:29 It doesn't repeat the image.
• 02:30 Well, that may not be what you want, because,
• 02:32 what about all this white space here?
• 02:34 So, if you come back here, we can give this a size.
• 02:37 We can go background-size, and let's say 100%.
• 02:43 We'll save this, come back.
• 02:44 And it stretches it to 100%.
• 02:47 Now there are some other things you can do as well.
• 02:49 You can do, we have no repeat but you could repeat, let's say x.
• 02:56 And let's get rid of this.
• 02:58 So we save this.
• 03:00 It repeats it along the x-axis.
• 03:02 If we say repeat: y it'll repeat it along the y-axis,
• 03:07 which we don't really see because it isn't long enough.
• 03:11 Let's put that as no repeat.
• 03:13 But we can also say give this a specific background position.
• 03:17 And to do that we do background-position and
• 03:21 we can say left, let's say, for instance.
• 03:27 Left, we can say right.
• 03:33 Boom. It bops it over to the right.
• 03:35 We could say right top.
• 03:38 This probably won't do anything.
• 03:40 It was already in the right top.
• 03:41 It shifted it a little bit.
• 03:42 Or right bottom, shifts it a little bit more, and things like that.
• 03:47 So that's pretty much background and background images.
• 03:51 There's one more thing.
• 03:52 You don't have to actually type in all of these specifically.
• 03:56 You can do something called shorthand.
• 03:57 And to do that, you put them all in one line.
• 04:01 So if you want.
• 04:02 And you put it inside this semicolon here.
• 04:05 So we have the URL, we can then type, no repeat space.
• 04:10 Let's say we want the position to be right.
• 04:14 We can save that.
• 04:15 Actually, let's go ahead and delete those.
• 04:17 We need to give it a color.
• 04:19 So we just want, let's see, a color code.
• 04:21 I just want white.
• 04:23 That's F, whoops.
• 04:25 Save this.
• 04:26 Hm, we get nothing.
• 04:28 Gotta remove this image.
• 04:29 It just becomes background at this point.
• 04:31 So if we save this, hit reload, boom.
• 04:33 So you can see it's all on one line.
• 04:35 It's a little bit easier to read, but it kinda gets confusing.
• 04:38 So I don't like to use this method.
• 04:40 I just like to write each one out specifically just to keep track of
• 04:43 things better.
• 04:44 But this is a shorthand method.
• 04:45 And the order it goes color, and then image, and then repeat, and then position.
• 04:52 So you wouldn't put no-repeat right here.
• 04:55 So you have to remember which position to put these in.
• 04:57 That's why I don't do it this way.
• 04:58 I just typed them each out on their own line but
• 05:01 that's something to keep in mind.
• 05:03 So that's backgrounds and that's all for this video.

Lesson notes are only available for subscribers.