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