Transcript from the "Height" Lesson
[00:00:00]
>> Jen Kramer: There is also a height function in boxes, okay? There's also a height function in boxes. Somebody ran into this yesterday with their code pen, they had a background image on a div that had no content to it. And this is a very typical situation where you might wanna use one of these.
[00:00:17]
So let's go ahead and try this out. I'm gonna go to placekitten,
>> Jen Kramer: Dot com and I'm gonna just go ahead and copy one of these links up here on the top. And some of you have remarked on the numbers in the placekitten links, this is the width and the height of the pictures, okay?
[00:00:41]
So you can change those numbers to whatever you want. That's the width and the height of the picture in pixels, okay? So we know we have a picture here that's 200 pixels wide and 300 pixels tall. In my code pen, if I drop that in, this code pen, I'm gonna go ahead and drop in a div with a class of box three, cuz I'm creative that way.
[00:01:08]
And I'm just gonna end the div right there, okay? And then over here in my CSS, let's go ahead and put in a background image, .box3. We'll put in a background image.
>> Jen Kramer: Which is URL, and we'll use that place kitten image as our background image. And if you look, what do we see on the web page and why?
[00:01:49]
>> Jen Kramer: Yeah?
>> Students: Is it because it's just too big?
>> Jen Kramer: No. First of all where is box3 displaying here on this web page?
>> Jen Kramer: Down here on the bottom. This is what, this orange one is? Which one?
>> Students: Box1.
>> Jen Kramer: Box1. What's this here?
>> Students: Box2.
>> Jen Kramer: Box2, right?
[00:02:15]
Then we have this weird line here. What's that?
>> Students: Box3.
>> Jen Kramer: That is box3. Why does it look like a weird line?
>> Jen Kramer: What's going on? Yeah, Cassie.
>> Cassie: Div like our first one is working with that.
>> Jen Kramer: Right. So this very first div is applying to box three.
[00:02:40]
We said we had a five pixel blue solid border. So that's our top border and our bottom border smashed together, making what looks like a 10 pixel blue line and nothing in between, right? The problem here is that our div has no height to it, and we're working with a background image.
[00:03:01]
So background image just fills the image in, no matter how big your box happens to be, or how small it happens to be. It doesn't care, right? It will repeat until that box is full and covered with the background image, okay? In this case, we haven't specified the height of the box and the width is it's at its default.
[00:03:18]
If we specify our height to this box.
>> Jen Kramer: So if we say height is now 300 pixels which is the height of the image, which is why I'm using pixels. Now our kitten will show up. [SOUND] Isn't that lovely? Okay, or we could cut up the kitten's body, just like that.
[00:03:46]
[SOUND] Now we can only see her head, so sad. So you can change the height and just change the various parts of the kitten that you can see, right? So that's our div with our background image. This is a good situation for using height. I am using pixels because I'm working with an image its height is defined in pixels.
[00:04:12]
You don't have to use pixels here, you could use rems, okay? So we could say instead, we could say, make it 10 rems high. [SOUND] There it is, it's still working. That works too. Yes?
>> Student1: Looks like using percentages doesn't work.
>> Jen Kramer: Using percentages doesn't work, which is a great observation.
[00:04:34]
So if I said make this, instead make this 25% high. We actually get something that's broken, okay? And that is because, once again, there's no content in this div. We can't use percents in that particular situation. They just don't work. So you're gonna have to use some other unit of measure, whether that's pixels or rems, or something else.
[00:05:02]
And that will that will actually give the box height. Yes?
>> Student1: So it looks like both when we used width percentage was width of the screen, so that would change why isn't it like percentage of height of the screen?
>> Jen Kramer: Because height is always defined by your content.
[00:05:16]
However much content you have is how tall it is.