3.1 Create a 16:9 Image Panel

Hey, welcome back to XD To Code with Avocode 3. We just finished getting all of the basics and setup done and now we're gonna start adding content into the site. In this section of the course, we're gonna be setting up the welcome panel, that first panel on our site here, as well as the four typography panels. And we're gonna start with a focus on panel one, this panel here, and there are a couple of different things that we need to do to bring this panel together. So we're gonna split it up and start by focusing on getting this background image in here. And I'm making this panel retain a 16 by 9 ratio automatically as the amount of available space it has, modifies. So let's jump into our code, let's actually split this layout. So that we can see both our HTML and our CSS at the same time. So we need a new div inside our main element here. And we're going to give it the class panel_one. We don't need anything inside it just yet. In our CSS, we're gonna set up a corresponding class, panel_one. And we're gonna give this panel a width of 100%. And we're gonna give it the background image that we exported earlier, onebg.jpg. So we'll say background: url and then we'll specify our correct location. And we're gonna position the background image vertically and horizontally in the center. And we're gonna say we don't want it to repeat. We'll save this out and have a quick look. Right now you can see absolutely nothing, although if we go into our code, we can see we do have our panel_one div and, We are loading in the correct image. So what we wanna do is give it some height, but we're not gonna do it in the usual way. And that's because, as I mentioned, we want to make sure that this keeps its aspect ratio at 16 by 9. So instead of using the height property to give it height, we're actually going to use the padding property. So padding gives you interior spacing. That means that you can kind of use it as a bit of a hack to give you height inside a body instead of using the height property. So we're gonna set padding-top. And we're gonna use a percentage value here. That value is gonna be 56.25. So, why that value specifically? The reason is we're trying to get an aspect ratio that has 16 units of width for every 9 units of height. To make that happen, we need to know what portion is that 9 units of height in comparison to the 16 units of width? To figure that out, all we need to do is calculate 9 as a percentage of 16, and that percentage is 56.25. So by setting this padding-top property to 56.25%, it's always gonna have a height that's 56.25% of whatever the width of the element is. And that ratio works at the same as the 16 by 9 ratio. And because we're using padding to give our element height, we wanna make sure that the actual height is set to 0. Then that way we won't get any little bits of extra space in there that we don't want. So let's save that and take a look. So now you can see we've got the height correct. And if we hover over this panel, you can see that the height of the panel is an exact fit for the background image, which has been exported at a 16 by 9 ratio. Now if I turn on Responsive Mode and I start shrinking, you can see that the panel keeps that 16 by 9 ratio the whole way down as it shrunk. Now we're actually gonna change the ratio that this area uses as it gets smaller, because it's gonna be not enough height to fit our content into. But you can see, mechanically, how that works. So now there's just one more thing to change and that is, you'll notice that as we're shrinking down, the image in the background is just getting cut off but it's better, it's gonna look better if we can have it shrink down. So back in our code, we're gonna add the property background-size and we're gonna set that to cover, which will make sure that it covers the entire area. So now when we shrink down, that image is gonna change along with it. And now that section is done. Now that we've got our panel_one background in place and its aspect ratio is working, we can move on to introducing our content tile here that contains our welcome message. So in the next lesson, we're gonna set up this content tile, get it centering vertically and horizontally, and get our arrow set up at the bottom here. So we're gonna step through all of that in the next lesson. I'll see you there.