2.4 Creating an AMP-Powered Page Cover

Hey, welcome back to up and running with AMP. In this lesson, we're gonna take the image that we added in in the last lesson, and we're gonna convert it so that it works just like a background cover image. Now, the reason that we're doing this is because usually when you create a cover image, you do it with CSS. You set the image as a background image, and then you'll use additional CSS background image settings to control the sizing and the layout of the image. But if you take this big image, which most cover images usually are, and you set it as a background image, then AMP can no longer access that image. So that means that it can't do all of its image optimizations for you. So what you can do instead when you have a large image that you would typically use as a background image, you can use a regular AMP image tag instead. But through CSS, through AMP valid CSS, you can make that image behave just as it would, or almost exactly as it would, if you were using it as a background. So right now, we've got our image here, it's taking up a little bit too much height. With the cover image, you only want to fill the viewport at the size it is when the user first lands on the page. You don't want it to go higher than that. And you also with the ability to have some text or other elements sit over the top of the image. Okay, so back in our HTML page, we just need to start adding in a little CSS to make this image work the way we want it to. And we're going to do that by styling this doc_header class. So below the CSS that you already have, just add in a little comment that says that the code that you're writing now is AMP friendly styling. So this is stuff that we're adding in not just for generic appearance, we're adding it in specifically so that everything's going to work well with AMP. Then let's start creating our doc_header style. And the first thing that we're gonna do is set the height of our image to 100 vh. Usually if you we're doing something like this, you would set the image to be 100% height rather than 100 vh. But the reason that we're not doing that here is, for that technique to work, we would also need to have the ability to set the body element to 100% height. However, in AMP's own CSS, it sets the body height to auto and then adds an important flag to that. That means that there is no way to enforce the body to be 100% height. So rather than basing the height of our image on the height of the body tag, instead we're going to base it on the height of the viewport. So by setting the height to 100 vh, we're setting it to 100% of the viewport height. Which gives us the layout that we're looking for without clashing with any of AMP's CSS. Then we're just going to add a background color to this. We'll just set the div to be black. And next we're gonna set this to overflow hidden. Because while we set the div itself to be 100 vh, our header image inside it might be a different height and we wanna clip off any excess in that image. So by setting overflow to hidden, you're only gonna see whatever portion of that image is visible through our doc_header div. And then finally, we're just gonna add in position relative because we need the ability to add content that's gonna sit over the top of this image. And we're gonna do that in the next lesson by absolutely positioning that content. And in order to make that absolute positioning work, we need to make this div relatively positioned. So now if we go back to our preview and have a look at our image, you can see that we no longer have any ability to scroll up and down, because our div is now the exact same height as our viewport. And that means in turn the visible area of our cover image is also the same height as our viewport. But there is still one problem. As long as the browser window is wider than it is tall, what we have so far is gonna look right. However, when we shrink it down to the point that the browser window is taller than it is wide, we don't have enough image anymore to fill up our doc_header div. Now, this is where we can't quite achieve the same thing as we could if we were using this image as a background image. If we were, we'd always be able to make sure that this image filled up this space. But in this context, we're just going to have to use a workaround to approximate using it as a background image as best we can. So what we're going to do is jump back into our code. We're going to at a new class name onto the image itself. And we're going to add the class doc_header_bg. We're gonna to create a style for that in our CSS, and we're gonna set the min-height of our image to 100 vh. So that means that no matter what the dimensions of our viewport are, our cover image is always going to fill up that viewpoint. Now, this does warp the aspect ratio of the image. And that's where you can't quite achieve exactly what you could if you were using this as a background. But it's the best middle ground, because you still get a lovely cover image, plus tapping into the optimization that AMP gives you at the same time. Okay, so now our cover image is ready to go. And the next stage is going to be adding some content to sit on top of it. And we're going to be doing that in the next lesson. At the same time, we're going to be integrating some web fonts in an AMP friendly way. We're gonna use these web fonts to control the typography of the content that's gonna sit in our cover area. And we're also gonna use a web font to drive some icons in this area. And as with most things, there are some specifics on what you can and can't do with web fonts when using AMP. So we're gonna go through all of that in the next lesson. I'll see you there.