Backgrounds: Size and Position

So, by default, a background images initial position is the top left hand 0:00 corner of the containing element, as we're seeing here in our main header. 0:05 Well, we can control this background position with the background 0:09 position property. 0:13 So let's go back to our main header rule, 0:14 and right beneath the background repeat property. 0:16 Let's add a background-position property. 0:19 So, the background position property accepts position keywords along with 0:24 length units and percentages. 0:28 And the first value we write determines the horizontal position. 0:30 So, we're going to use the position keyword center, 0:34 which positions the image in the center of the containing element. 0:38 Now, the second value we write sets the vertical position of the image, but 0:41 notice that if just one value is specified, 0:47 the browser will assume that the second value is centered. 0:51 So, if we save our style sheet and refresh the page. 0:53 That's why we're seeing the background image perfectly centered inside our 0:57 main header. 1:01 Now, if we go back and add the position value, 1:05 top, and we take a look at it once again. 1:08 We can see how the image is now positioned at the top of the div, but 1:13 still centered horizontally. 1:17 And if we go back and change the position to say, center bottom. 1:20 This position's our image at the bottom of our main header and so forth. 1:25 Well, we can also get more specific about background positions when we 1:31 define a length value. 1:35 So, for instance, when using percentages, the values are relative to the height and 1:37 width of the background area. 1:42 So, let's change our background position value to 20% and 50%. 1:44 And when we take a look at it once again, we can see that our 1:51 image is now positioned 20% to the left side of the header, and 1:55 it's still vertically centered at 50%. 2:00 Feel free to pause the video and experiment with other percentage or 2:04 pixel values to see how the background position changes. 2:08 Moving forward, we'll keep our background position at center, so 2:12 that it's perfectly centered in the background. 2:16 Also, let's go ahead and remove the background size value, so 2:20 that we're able to see the entire background image at full size. 2:25 So now, as you've probably noticed, the background image appears too large. 2:31 And nicer parts of the image are being cutoff. 2:36 So it's not really being scaled to the size of our header. 2:38 Now, we could probably fiddle around with the background position values 2:42 to place our image at a better position. 2:47 So for example, instead of center we can say, 50% and 80%. 2:49 And when we take a look at it again and refresh, well that looks a little better, 2:55 but wouldn't it be great if we could see the full image and 3:01 have it proportionally scale to the size of our main header. 3:04 Well, the background sized property also accepts the value cover. 3:08 And what cover does is, 3:14 it ensures our background images display entirely at a scale size. 3:16 So, let's go ahead and change the background position value back to center, 3:20 and let's save our style sheet. 3:26 And when we refresh the browser, we can see how the cover value 3:28 adjusts the background image so that we're able to see the full image in our 3:32 header while maintaining the width and height proportions. 3:35 Now, background size cover is also a handy feature and 3:39 it's commonly used for creating full page background images. 3:42 Finally, let's go back to our main header rule and let's use the background 3:49 shorthand property to define all of our background values in one declaration. 3:53 So right below the background position property, 3:58 I'm gonna add a few spaces then I'm going to type background, and 4:02 I'm gonna start defining these background values. 4:07 So, first let's go ahead and copy the background color value and let's remove it 4:10 from our main rule because now we're gonna define it as our first background value. 4:17 Next, we're going to define the background image, so let's cut the background image 4:22 URL value, and let's also remove the background image declaration, and 4:28 we're going to paste the background image value after the color value. 4:32 Then after the background image value, I'm going to add a space. 4:37 And now we're going to add the background repeat value, so let's type no-repeat. 4:42 And next, let's add the background position value, so 4:49 we're gonna type center. 4:52 And then we're gonna type a space and 4:53 a forward slash, and after the forward slash, and 4:55 after the forward slash we're going to write the background size value, of cover. 4:57 So remember, the forward slash is there to separate the background-position value 5:03 from the background-size value. 5:08 And now, we can go up here and remove these background declarations because now 5:10 they're all in our handy shorthand property. 5:15 Now, usually, I prefer to keep the background size property and 5:20 value on its own line. 5:23 It's up to you, but for me, it just makes the code a little more readable and 5:25 easier to understand than one long background value. 5:28 So, I'm gonna go ahead and remove the cover value from the shorthand notation, 5:32 and right beneath the background property, I'm going to type 5:38 the background-size property and give the value, cover. 5:42 So, now when we save our style sheet, and refresh the page, 5:49 everything should still look exactly the same, which it does. 5:52 Great. 5:56 Now next, we're gonna take a code challenge where you're gonna have to apply 5:57 some of the new background properties we just learned to our wildlife container. 6:01