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