Skip to main content

Block Images vs. Background Images

Lesson 49 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Block Images vs. Background Images

Lesson 49 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

49. Block Images vs. Background Images

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

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

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

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

Student Work

RELATED ARTICLES

RELATED ARTICLES