Locked lesson.
About this lesson
Exercise files
Download this lesson’s related exercise files.
Backgrounds.docx58.7 KB Backgrounds - Solution.docx
58.8 KB
Quick reference
Backgrounds
Changing background colors and using images as backgrounds is simple with CSS.
When to use
Any time you want to change the background image color, or use an image as a background.
Instructions
To change the background color:
background-color: #cccccc;
To use an image as a background:
background-image: url("hike.png");
Some properties to position background images:
background-repeat: no-repeat;
background-repeat: x;
background-repeat: y;
background-position: left;
background-position: right;
background-position: right top;
background-size: 100%;
Hints & tips
- Change background colors with background-color: #cccccc;
- Use background images with: background-image: url("hike.png");
- 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.