Block Images vs. Background Images
Daniel Walter Scott
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Block Images vs. Background Images
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
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding