Skip to main content

Large Background Image

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

Daniel Walter Scott

Large Background Image

Lesson 69 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 2000+ more >

Lesson Info

69. Large Background Image

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

Large Background Image

Hi there, this video, we're going to put the giant lion in the background. Okay, so no Lion. Big Lion. Why would you hang about because we've done background images, we're going to do something slightly different. Well do positioning and no repeat and if you're interested Okay, we'll do the kind of V. S. Code coding website stuff for about the first three minutes. You'll notice that there's lots more time in this video. So for the last few minutes we'll actually show you how to build it in Photoshop with this kind of transparency and drop shadow. It's not really that essential. So watch the first three minutes and then skip over if you don't care about Photoshop. But if you do, we're going to do a little field trip. So you'll need a note from your parents. The bus arrives at three minutes into this video. Be ready. I'll see you there. Alright, so I've got my index page open and my style start CSS open. I want to add my background image. Now. Weirdly, we're not weirdly, but I can't add ...

two background images. Okay. And you're like, we don't have a background image. But remember, strangely, we have to use gradient as a background image so we can't do two on the body tag. So what we're gonna do is going to grab this background image, which is my gradient. We're going to add it to the html tag. Okay. We weren't using that currently because we I think we were doing high 100%. Okay. So if you don't have it, you have to add the html tag and it works just fine to have a little look still works. Got my background gradient. Nice. So over here I get to do my other background gradient background, not gradient background image. Okay. And remember it's the U. R. L. And I need to go and add the image to my local folder. So in your exercise files and project to, there's one in there called Image. Lion background. It's a little hard to see. Can you see in the video? It's like I made this, I'll show you how to make this in the end of the video but it's just kind of like transparent background anything. I'm going to copy it. Put it on my desktop and project to inside of images paste in here. And we'll go over here. Okay? And we'll go to images slash whereas an image line background, let's make sure semi colon goes in and let's just see how it looks. So kind of how you want it. Okay you might decide that that's awesome and that's how you want to do it. I want to just one in the middle. Okay so you can do background, image or background position, background, even background position and you can do background position. Top and set it. Okay I'm just going to go make it top and center. Okay so it's top it's centered. I wanted to not repeat actually just to say well that because it'll make more sense with this off. So we'll do background peace. I'm gonna go to none. None. I know it's no repeat. No repeat goodness for suggestions. So without repeat. It just ends up kind of wherever your website is. Okay. It just ends up in the left hand side. So now I want to turn this back on. Oh, shortcut. I didn't add the last shortcut sheet. Okay or the shortcut video was our command backslash. So you slipped it, hold control on a PC command on a Mac and hit forward slash. Okay. My mind four slashes down by the question mark. Cool. And now it's kind of where I want it to be nice. Actually, what I want to do is turn it around. We'll do that now where we show you actually how to make it because you can see, it's kind of cool. It's the shadow from the drop shadow around the back. But you can see through the background gradient Now if you don't have Photoshop skills, no worries. I've already got the image obviously ready for you and you can skip on to the next video. But if you want to check out how it's done in Photoshop, it's worth a look. I'll show you the sec be right back. Okay, So I've got Photoshop open, I'm using CC 2000 and 19. It'll work in pretty much every version of Photoshop and why are we in Photoshop. I feel like we need like a school trip. Okay. Get away from V. S code just for like half a video. At least I needed to anyway. And I know that I do videos like this and if I use stuff like our kind of half invisible Lion people will ask, how do you do it? So I'm also just like answer that question right here. If you're like, I don't care about Photoshop, I want to get back to my web project. You can totally skip on now. We're not going to do anything code or web based. We're just making an image. If you want to do it. Let's do it. Let's go to file new. Okay, over here switches to pixels and pick a size. I'm making my line quite big. Remember my websites about 10 24 across. So I'm making this 10 00. Okay. Big square resolution. Doesn't really matter. The thing that really matters is R G B. Okay. So click on that, click create. Okay, we've got a big white box. We're going to go file, we're going to go to place embedded. Okay, we're going to bring in something from your exercise files under project too. And it's called icon icon Lion Black place. And the cool thing about it is it's an SVG, which means scalable vector graphic means I can do this. It doesn't really matter how big it is. Okay, I can make it bigger. Okay, so if you're using and above. You will probably know by now you just grab the corners and drag you don't have to hold any keys down. You might hold down the option key on a MAC. Old key on a Pc to get it go from the center. If you're using CS six or really old version, you have to hold down shift to make sure that it scales without doing that distortion. Alright, mines going to kind of fill it in there. I'm gonna make mine a little smaller because I need the drop shadow to go around the outside. I've had return, what am I do before I go any further is I'm going to go to edit and I'm going to go to sorry edit even we're gonna go to transform and I'm going to flip horizontally because in my current one I feel like he's facing the wrong way, he's facing the same as the logo but he's kind of hidden behind all that stuff so I flipped them across so we're gonna add a drop shadow to him. So with that selected in your layers panel go to FX we're going to go to drop shadow. And my Yeah, so drop shadows, let's crank it right up so we can all see the capacity and then the main tool you're gonna play around with his distance. Kind of how far does that drop shadow feel like it is away from the subject and then the sizes, how blurry it is by the size down at zero. You can see it's a very strong crisp edged one. So in my case I've already kind of missed around with it. I want it to be both quite low the distance. Quite low. The size quite low and it's just kind of like mm hmm. Yeah, little drop shadow and maybe a little bit bigger in terms of the size bit fluffy And I'm going to have the capacity quite low which is going to make it quite hard to follow in this tutorial because it's going to be super low. You can barely see it there now but it's definitely there click. Ok. Now the magic trick is somehow turning on because we will lower the opacity of this layer. Everything turns off. That's where this one comes on. Everyone's Photoshop like what's the difference between these two and you're like they do the same thing except when you have a layer that you would like to turn the opacity down on but not the effect. So check this out But in the field down to zero. You see the actual layer itself turned down but the effect is still there and you can kind of see him. Now the next thing I want to do before I export it is I don't want this white background so with it selected, I'm gonna hit my trash can and that is ready to go. All I need to do is make sure I pick the right file format. Okay. So we're gonna go to file, we're going to go to export export and remember j pigs, no transparency bad. Okay. It puts the white back in your like go away. So the one I want is PNG, why aren't I using SVG? Because SVG is good for vector graphics. Okay. All those hard edge things when I start getting into this like blurry background stuff, it's just not going to work. Okay. So PNG now, also what I might do for this PNG is that this PNG has very little information in it. Okay. In terms of, it's got a few grays that's it and some transparent blocks so I can use the smaller file. Okay. Which is just eight bit PNG. That's going to make the file sizes have a look. So it goes from um 83 down to 46. Okay. And there's no visual difference. If you're dealing with a real super high quality image, you want to turn it off and the default is what is it? 16 bit. Sorry about it. Just do not eat but you'll be fine. Okay. PNG where I'm going to stick it, I'm going to stick it on my desktop in my project to files in my images and I'm going to rename it image line background. Okay. That's the one we had earlier. This guy is the same but he's facing the other way, click save and replace it, give it a sec, let's have a little look at our version. Look at that. There's our guy, he's in the background and he's facing the right way or our way. That's how to do that type of thing. The cool thing about it is that it shows through the gradient in the background. Of course if you had didn't have a gradient, just a solid color, you could actually just put that solid color in Photoshop. Okay, so I made a new layer, put it underneath. You can go to image. Sorry edit fill. And just with that layer selected you can pick a color and in my case I put color and you can go through and maybe type in the exact decimal number that you're using. I can't even remember what one hour one is but that's what you can do. I could drag it around. Hey, you could put that in there then it could go as a jpeg because there's no transparency. Alright. Off field. Drop over back on the bus. Let's get on to the next video

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