This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll learn how certain properties affect the size and position of an element's background.
Quick Reference
background-position
Controls the background position of a background image. By default, a background image’s initial position is the top-left corner of the containing element.
background
Shorthand for setting the individual background values in one place.
cover
The cover value adjusts the background area so that it's completely covered by the background image, while maintaining its width and height proportions:
.main-header {
background-image: url('../img/mountains.jpg');
background-size: cover;
}
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
You need to sign up for Treehouse in order to download course files.
Sign up