Transparent Gradients and Multiple Backgrounds

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