Block level images verses background images in HTML & CSS

Hey there, in this video we are going to put in the card background images. Similar to the backgrounds that we did in Project1. We're going to add a little bit of extra fanciness with background position. We're going to talk about the difference between Block Level Images, and these images that are set as CSS backgrounds. Let's jump in and work it out. 

So first up we want to put these background graphics in. Now I want to bring up a point, because there are times where we just put in the image in the HTML. So we've done that so far with this one here. It's Image Source, and we've put it into the actual HTML side, and we've done it when we've put it as a background image. Remember we did it in the last project, we had that giant background graphic. So why would you do both? 

Now what will happen is you'll have a mixture of both. So the reason you have it over here in the HTML is because if it's in the HTML it's called what's called a Block Level Image. It means that it gets seen by the browser or at least the search engine. The search engine comes along, like Google or Bing, and comes here and says, "Hey look, there's a website, it's all about bike repairs," because we've got it in our title there. And all this, they say, "Oh, there's lots of text about bike repairs, there's even an image," "It's got Alt text, with a guy about doing stuff with bikes", and it all kind of adds to the search engine's ability to understand you, and what your website's like, and what you should rank for, whereas over here in the CSS it ignores it, it goes, " I don't care if you've spent ages playing with the top padding", because it doesn't add any value to the search, right? 

Whether your padding is that, or whether your line spacing. The same problem as the images and background gradients. They all get ignored so it's best to have as many images as you can in the HTML, because you want it counted against your website, not against it, towards your website, let's say, whereas the reason you put images in the background, like we're going to, in this case, is because of two things. One is, they're only supporting graphics, they're not really that useful. They're not like key parts of the website, they are just style, and the other reason is, we want to put stuff over the top, and it makes it super easy when it's a CSS background graphic. Just do it, and you can put stuff over the top, whereas if you deal with an image, it's really hard to put things over the top of it. 

Let's have a quick little look, there's my image here. So here's my image, I want to put a P-tag just above it. So I'm going to put in a P-tag and I'm going to put text, but because these both are block level things, so block level text, block level images, they would try and fight with each other You can see here, the text has pushed this guy off into the next line, and it doesn't really matter if this text is in front of it or behind it, they really don't want to mix. They're like oil and water. There are ways of making that happen. You've got to start playing with things like positioning and Z index, and there's a lot of hassle, so to get away from that hassle, we are just going to use background image. 

So to do it we need to copy the graphics over. So let's find our Exercise Files, let's go to Project2. I want these three, Image Background 1, 2, & 3 Let's copy it, let's go to my Desktop, find Project2. Put it in our images folder, and look, they're already in there. Yours won't be, mine are, so paste yours in here. Mine's already here because I've already had a couple of goes at this video, and it's gone badly, trying to explain Block Level versus CSS background. It's taken me a couple of goes, but I feel like I've nailed it this time. It's the last time I'm going to do it anyway. 

So our images are there, let's add them, so we're going to go to Card1, and we might get rid of the-- let's do a couple of things, let's get rid of the background color of all of these. So you, you, you, don't need them anymore. So Card1, let's put in our background, Remember what it was? Background Image. Nice easy one. The next part of this is kind of weird, it's URL. URL, a couple of brackets, and inside of here you need to type the path to the image. In our case it's images, and then I can click on Image Background Card1. And at the end here, put in a semicolon. Save it, let's go
 and check, and it works. 

You can kind of see it repeating there, the image is not tall enough to fit. So you're never going to get the image to fit perfectly. You can, you can force it, but because we're using a percentage, 30, what are we? 30%, it's going to be very hard to get it perfect, right? So the way to get it to perfectly fit the background, is, do you remember what the thing was? It was called background-- do I remember? Background Size. remember this one, Cover? It's a really handy CSS property that just kind of fits the box that it's in. So if the box gets smaller, let's say it's 250, and I should make it-- I'll make it substantially smaller just so that you can see, and a width of-- let's leave it at that. Has a minimum height, why is it still tall? Ah, so cards here. 

So originally we added a height to cards, and this is, it really kind of illustrates why it's a bit of a pain adding Heights in. We do it in this class just because it makes it easy for me to show you, "Hey, we made a Div tag," and we know it's in the right place, because we gave it a height and a color, but whenever I'm working, never adding heights. Heights come from the content, so I'm going to delete cards, you do the same. Hopefully now, is it still working? No, all of these guys are fighting. So these guys are keeping that box nice and tall. It's not what I want. So what I'm going to do is get rid of the minimum height on you, you, and let's see. There we go. 

The cool thing about it is, if I make this 100 pixels wide now, and make it 50 across, can you see, the image tries to stretch to fill the gap. If I make this 10% across, cover still tries to fit the box in there. Dan, that was a terrible explanation. What I want you to do though is, I'd like you to have a minimum height of let's say 250 for the moment, for all three of these. I think it was set to 300, let's change it here, I'd like you to have no height on the cards. There's no color on any of these, let's have a little look. We've got to save it, let's have a little look. 

We're going to do it, I want to show you one little extra bit. Now our image, her feet's being chopped off, because what happens is, this cover by default will, it chose to kind of center everything, no it doesn't, it uses the top left, because if I make this-- no, I'm not going to mess with a height anymore, but if I make-- its using the top left, and if I make the box shorter you'll only see her head, but there is a way of forcing it to do what you want. So instead of it being top left, you can get it to be the bottom, so you'd use something called Background Position, and I want to say, bottom, please, and now hopefully we should see her feet. 

I'm using bottom because this stuff at the top here, I don't mind getting cut off. You can use Center, let's say you want to cut the difference, because your image just has a bit of both. You can use Center, and that means it will kind of, yeah, cut a bit of the top off and a bit of the bottom off. Let's have a little look. I'm going to go back to bottom, it's going to undo, and I'd like that to be on all of them. So I'm going to grab this, maybe the same here, and the same for 3, but I need to go through and change you to 2, you to 3. Let's see how well it did. 

That one worked, that one didn't work, oh, because I put 12; you saw it. That guy might be different, you might decide to go center for that one, or-- no, they're all okay. So I guess the big takeaway from this, is that we half know what a Block Level image is versus a CSS Background image, and we learned a few extra tricks, like playing around with the background position, this might be good now. Remember our first project, the big background image, you could go through now, and change the position to say, center,  instead of being in the top. 

We'll leave it there for this one. We'll kind of wrap it up as being specifically to background images, and in the next video we'll finish up the-- or at least get started, or at least do a bit more of the cards, we'll put in the text, get at styling, or do some fun things with full clickable cards. I'll see you in the next one.