We're also able to create gradients, or

a color value transitions into a transparent value.

And that's what we're gonna do in our main header.

We're gonna create two transparent linear-gradients that

overlay our main header's background image.

So first, let's go back to our style sheet and delete the second background-image

declaration in our main-header rule, so the one containing the radial-gradient.

What we're gonna do is add the new gradient values

to the existing background property here in our main-header rule.

So a really useful feature in CSS3 is that

we're able to layer multiple background images.

So all we have to do is separate each background value with a comma,

just like we did earlier with multiple text shadows.

When defining multiple background values, it's important to remember that

the first value listed will be the top layer rendered.

And the last one will be at the very bottom, so

in our design we'll want the mountains background image, as the bottom layer,

so let's bring this entire value down [SOUND] to the next line.

Then I'll hit the tab key a few times to make things a little more readable.

And now, we're gonna define a linear-gradient,

as the first topmost value.

So let's type linear-gradient followed by a set of parentheses and a comma.

So next, we'll need to add our color stops inside the parentheses.

And we're only gonna add two color stops this time.

The first color will, once again, be the orange hex value of #ffa949 and

as the second color, we're going to use the keyword value transparent.

And we'll want to see full transparency a little sooner than at 100%.

So, let's change that by adding a color stop position of 90%,

right after the transparent value.

All right. So, let's go ahead and

save our style sheet and see what this is looking like.

When we refresh the browser,

notice how the gradient starts with the orange hue at the top position.

Then ends in full transparency, starting out at about 90%.

So the result is a nice transparent gradient that overlays our

background image.

And the transparent value is what allows the image to show through the gradient.

Next, let's add a second transparent linear-gradient that will smoothly fade

the white background of the page with the bottom half of

the header background image.

[BLANK_AUDIO]

So back in our main header rule right after the first comma,

I'm going to hit Enter to create a new line.

And then, we're gonna create a new linear-gradient.

[BLANK_AUDIO]

Followed by a comma.

So, this time we're going to set the first color value to white.

By typing the hex value #f f f.

And we're gonna set the second color value to transparent.

And we also want the gradient to start at the bottom of the header and

end at the top.

So let's set a gradient direction angle of 0deg, right before the first color stop.

All right.

So let's go back to the browser and take a look.

First we'll save our style sheet.

And now let's scroll down to the bottom of the header.

And when we refresh the page, now we're able to see the soft white overlay, that

blends the background color of the page with the background image, really cool.

[BLANK_AUDIO]

Finally, as I mentioned earlier,

multiple backgrounds are layered according to the order values.

The first value being the topmost layer.

So, keep in mind that if we define a fully opaque background image or color,

anywhere above the bottom layer, it will cover up the background layers behind it.