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
Every HTML element has a background layer that is transparent by default. In this video, you'll learn basic background properties for applying colors and images.
Quick Reference
background-image
Sets one or several background images for an element.
background-size
Sets the size of a background image.
background-repeat
Controls whether or not the image is tiled and how it gets tiled both vertically and horizontally. The value repeat-y repeats the image vertically, while repeat-x repeats the background image horizontally.
In an HTML element,
0:00
everything except the margin area is
considered the background layer.
0:02
And every element has a background layer
that is transparent by default.
0:05
We can fill that layer with a color or an
image.
0:09
So, let's take a look at some of the basic
CSS background properties for
0:12
applying colors and images.
0:17
Then we'll see how certain properties
effect how the background of
0:19
an element is positioned and sized.
0:22
Now so far throughout this course, we've
used the background color property to set
0:25
the background color of our main header in
the Wildlife container.
0:30
So we already know how that works.
0:35
What we're gonna next is, we're gonna give
our main header element
0:37
a background image, and we can do that
with the background image property.
0:41
So let's go back to our main header rule
right here under the comment section for
0:46
Main Styles.
0:51
And right beneath the height property,
let's add a background image property.
0:52
Background image values are defined as a
URL value,
1:00
which uses the URL function to tell the
browser where to find the image.
1:04
So as the background image value,
1:09
let's type url, followed by a set of
parentheses.
1:11
Now, inside the parentheses is where we
write the path to the image we want
1:15
to display.
1:20
Now the URL can optionally be enclosed
with either single or
1:21
double quotes, so let's go ahead and use
single quotes.
1:26
Now, we'll want to display the mountains
that JPEG image
1:29
located right here in our image directory.
1:34
So, if we go back to our background image
value and specify the path to the image
1:38
by typing image followed by forward slash,
then the name of the image,
1:43
which is mountains.jpg, when we save our
stylesheet and refresh the page,
1:48
we don't see the background image just yet
in our main header.
1:56
Well whenever a background image doesn't
display on a webpage like this,
2:00
it usually has to do with the file path
that references the image.
2:04
When specifying a relative path to an
image,
2:09
if our stylesheet is in a separate folder,
so in our case it's in the CSS folder.
2:13
We'll need to tell the browser to move
outside the CSS directory,
2:18
then move inside the image directory.
2:22
And we can do that by adding two dots and
2:26
a forward slash right before the image
directory name.
2:29
So this tells a browser to move one
directory backwards,
2:34
then start searching for the image in the
image directory.
2:37
So now when we save our stylesheet and
refresh the browser.
2:40
Now we're able to see the mountains image
as a background of our main header.
2:45
Cool.
2:51
Now by default, a background image is
repeated or
2:53
tiled both horizontally and vertically, so
that it covers the entire element.
2:56
Now since our image is pretty large in
size, we're not really seeing it repeat.
3:01
But we're also able to set the size of
3:07
our background images using the background
size property.
3:09
And we can set the background size using
any length values or percentages.
3:13
So let's go back to our main header rule,
and right beneath the background image
3:18
property, let's add a background size
property.
3:22
And let's set the background size to 40%.
3:29
So when we use percentages as the
background size value,
3:32
keep in mind that percentage values are
relative to the width and height of
3:36
the background area of the element, not
the width and height of the actual image.
3:40
So, we're gonna save our stylesheet, and
go back to our browser preview, and
3:46
let's take a look at what happens when we
refresh the page.
3:52
So, when we do that, notice how the
background image is now
3:55
40% the size of the entire background
area, and
3:59
we're seeing several of them, because it's
actually repeating or tiling by default.
4:03
But, we can control whether or not an
image is tiled, and exactly how it gets
4:10
tiled, both vertically and horizontally,
with the background-repeat property.
4:15
So, let's go back to our main header rule,
and
4:20
let's add a background-repeat property.
4:24
Now, the default value for
background-repeat is repeat,
4:28
which as we can see repeats the image
vertically and horizontally so
4:33
that it covers the entire background image
painting area.
4:38
Now if we only want the image to repeat
horizontally,
4:42
we can use the value repeat-x, which, as
we can see when we
4:45
refresh the page it repeats the image
horizontally on what's called the x-axis.
4:51
And if we go back and change the value to
repeat-y,
4:57
the image now repeats vertically on the
y-axis.
5:01
Now if we don't want our background images
to repeat, we'll need to
5:07
use the value no-repeat, and that's what
we're going to use in our case.
5:11
So when we save it and refresh the page,
as we can see that no-repeat value
5:16
places the image in the top left corner,
and it does not repeat in any direction.
5:22
Finally, it's usually good practice to set
a background color
5:28
to preserve the contrast between the
background and the content.
5:32
Just in case the image is not available,
or
5:36
the user has disabled images in the
browser.
5:38
So, for now, let's keep the orange hexa
decimal value as our background color.
5:41
You need to sign up for Treehouse in order to download course files.
Sign up