Hey there in this video we are going to put in the card background images okay. Similar to the background that we did in project one, we're going to add a little bit of extra fancy nous with background position and we're going to talk about the difference between block level images and these images that are set as CSS backgrounds. Alright, let's jump in and work it out. Alright, 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. Okay. 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. And 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 a...

nd it means that it gets seen by the browser or at least the search engine. Okay. The search engine comes along like google or bing and comes through and says, hey look, there's a website, it's all about bike repairs because we've got it in our title there. Okay. And also says, oh, there's lots of text about bike repairs and there's even an image. It's got all text with a guy about doing stuff with bikes and it all kind of adds to the search engine's ability to understand what your websites like and what you should rank for. Whereas over here in the C. S. S, it ignores it, it goes, I don't care if you've spent ages playing with the top heading because it doesn't add any value to the search right? Whether you're padding is that or whether you're line spacing the same problem as the images and background gradients, they will get ignored. So it's best to have as many as many images as you can in the html because you want it counted against your website or against it towards your website, let's say. Whereas the reason you put you put images in the background, like we're gonna in this case is because two things. One is their only supporting graphics, they're not really that useful. You know, 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 it's you put stuff over the top. Whereas if you deal with an image, okay, it's really hard to put things over the top of it, let's have a quick little look where's my image here. So here's my image. I want to put a tag just above it. So I'm gonna put in a p tag and I'm going to put text, but because these are both block level things. Okay, so block level text. Block level images that would try and fight with each other, you can see here the text is 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 like oil and water. There are ways of making that happen. Okay, 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 a background image. So to do it, we need to copy the graphics over. So let's find out exercise files, lets go to project too. And I want these three image background 12 and three. Let's copy it. Let's go to my desktop. Fine project to put it in our images folder and look, it's already in there. Yours won't be minor. So paste tools in here, mine already in here because I 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, so that's the last time I'm going to do it anyway. Alright, so images are there, let's add them. Okay, so we're going to go to card one 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. Okay, so you you you yep I don't need them anymore. And so that card one okay let's put in the background, remember what it was? Background image. Okay, that's easy one. The next part of this is kind of weird. It's U. R. L. Okay, you're around a couple of brackets and inside of here you need to type the path to the image and in our case it's images and then I can click on image, background card one and at the end here put in a semi colon 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. Okay. You can you can force it but because we're using a percentage 30, what are we? 30%. It's gonna be very hard to get it perfect. Right so the way to get it 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 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. Okay. And I'll make it I'll make it substantially smaller just so that you can see in the width of let's leave it at that has a minimum height. Why is it still at all? Ah So cards here. So originally we added a height two cards and this is 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've made a div tag and we know it's in the right place because we give it a height and 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 all of these guys are fighting. These guys are keeping that box nice and tall. Okay, that's not what I want. So what I'm gonna do is get rid of the minimum height on you and you let's see here we go. So the cool thing about it is if I make this 100 pixels wide now and make it, I don't know 50 across, you can see the image tries to stretch to fill the gap. Okay, if I make this 10% across cover, still tries to fit the box in there dan. That was a terrible explanation. Okay, 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. Okay, for all three of these. So I think it was set to 300. Let's change it here and I'd like you to have no height on the cards. There's no color on any of these. Have a little look. Got to save it and have a little look, we're going to do it. I want to show you one little extra bit Now al image her feet had been chopped off because what happens is this cover by default will it tries to kind of center everything? No, it doesn't, it doesn't, it uses the top left. Okay, Because if I make this um I'm not going to mess with the height anymore, but if I make it's 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. Okay, so instead of it being top left, you can get it to be the bottom. So you'd use something called background position. Okay, I don't want to say bottom please. And now, hopefully we should see her feet are using bottom because there's stuff at the top here. I don't mind getting cut off. Okay, you can use center, let's say you want to cut the difference because your image has a bit of both. You can use center and that means it'll kind of 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 gonna undo and I'd like that to be on all of them. So I'm going to grab this and I'll do the same here and the same for three. But I need to go through and change you too and you three. Let's see how well it did. Okay, That one worked. That one didn't work Because I put 12. You saw it alright. 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 have to know what a block level images 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. All right. We'll leave it there for this one. Will kind of wrap it up as being specifically to background images 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 it, styling, we'll do some fun things with full clickable cards. All right. I'll see you in the next one

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Block Images vs. Background Images

Block Images vs. Background Images

Lesson Info

49. Block Images vs. Background Images

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks