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
CSS lets us layer multiple backgrounds and create gradients where a color value transitions into a transparent value. In this video, we're going to create transparent gradients that overlay our main header's background image.
Quick Reference
We're also able to create gradients, or
0:00
a color value transitions into a
transparent value.
0:02
And that's what we're gonna do in our main
header.
0:05
We're gonna create two transparent
linear-gradients that
0:07
overlay our main header's background
image.
0:11
So first, let's go back to our style sheet
and delete the second background-image
0:13
declaration in our main-header rule, so
the one containing the radial-gradient.
0:19
What we're gonna do is add the new
gradient values
0:24
to the existing background property here
in our main-header rule.
0:27
So a really useful feature in CSS3 is that
0:32
we're able to layer multiple background
images.
0:35
So all we have to do is separate each
background value with a comma,
0:38
just like we did earlier with multiple
text shadows.
0:41
When defining multiple background values,
it's important to remember that
0:45
the first value listed will be the top
layer rendered.
0:48
And the last one will be at the very
bottom, so
0:52
in our design we'll want the mountains
background image, as the bottom layer,
0:54
so let's bring this entire value down
[SOUND] to the next line.
1:00
Then I'll hit the tab key a few times to
make things a little more readable.
1:04
And now, we're gonna define a
linear-gradient,
1:08
as the first topmost value.
1:11
So let's type linear-gradient followed by
a set of parentheses and a comma.
1:14
So next, we'll need to add our color stops
inside the parentheses.
1:22
And we're only gonna add two color stops
this time.
1:26
The first color will, once again, be the
orange hex value of #ffa949 and
1:29
as the second color, we're going to use
the keyword value transparent.
1:38
And we'll want to see full transparency a
little sooner than at 100%.
1:44
So, let's change that by adding a color
stop position of 90%,
1:48
right after the transparent value.
1:52
All right.
So, let's go ahead and
1:55
save our style sheet and see what this is
looking like.
1:56
When we refresh the browser,
1:59
notice how the gradient starts with the
orange hue at the top position.
2:01
Then ends in full transparency, starting
out at about 90%.
2:06
So the result is a nice transparent
gradient that overlays our
2:11
background image.
2:15
And the transparent value is what allows
the image to show through the gradient.
2:16
Next, let's add a second transparent
linear-gradient that will smoothly fade
2:22
the white background of the page with the
bottom half of
2:27
the header background image.
2:30
[BLANK_AUDIO]
2:32
So back in our main header rule right
after the first comma,
2:35
I'm going to hit Enter to create a new
line.
2:39
And then, we're gonna create a new
linear-gradient.
2:43
[BLANK_AUDIO]
2:46
Followed by a comma.
2:48
So, this time we're going to set the first
color value to white.
2:50
By typing the hex value #f f f.
2:54
And we're gonna set the second color value
to transparent.
2:58
And we also want the gradient to start at
the bottom of the header and
3:04
end at the top.
3:08
So let's set a gradient direction angle of
0deg, right before the first color stop.
3:09
All right.
3:17
So let's go back to the browser and take a
look.
3:18
First we'll save our style sheet.
3:20
And now let's scroll down to the bottom of
the header.
3:22
And when we refresh the page, now we're
able to see the soft white overlay, that
3:25
blends the background color of the page
with the background image, really cool.
3:30
[BLANK_AUDIO]
3:35
Finally, as I mentioned earlier,
3:37
multiple backgrounds are layered according
to the order values.
3:39
The first value being the topmost layer.
3:43
So, keep in mind that if we define a fully
opaque background image or color,
3:46
anywhere above the bottom layer, it will
cover up the background layers behind it.
3:51
You need to sign up for Treehouse in order to download course files.
Sign up