1

00:00:04,220 --> 00:00:11,060

OK, guys, now we can just talk about the backgrounds and also we can talk about the height and the



2

00:00:11,060 --> 00:00:13,770

width by a different way.



3

00:00:14,270 --> 00:00:26,060

Uh, let's just create a new file and call it back ground dot at to A.M. and then we will make it.



4

00:00:26,090 --> 00:00:36,590

Oh, and see if we can go here and then you file and call it back around NTFS.



5

00:00:37,130 --> 00:00:42,020

And then here we will put Achey at five.



6

00:00:43,460 --> 00:00:53,660

And then for this part we can just back, back around and we will connect between this esteemable file



7

00:00:53,660 --> 00:00:56,840

and that's the best we can make here.



8

00:00:58,010 --> 00:01:07,120

Link our title title changed and actually f uh, back dot.



9

00:01:08,330 --> 00:01:10,780

Let's close this angled bracket.



10

00:01:12,590 --> 00:01:13,910

Let's see what we have here.



11

00:01:15,170 --> 00:01:16,150

OK, good.



12

00:01:16,940 --> 00:01:20,870

And after this part, we will add our first division.



13

00:01:21,340 --> 00:01:26,710

We can we can just give it a class back.



14

00:01:27,300 --> 00:01:27,980

That's good.



15

00:01:29,180 --> 00:01:34,030

Now we can just go to that file and see what we can add inside.



16

00:01:34,040 --> 00:01:35,330

Subtract here.



17

00:01:35,780 --> 00:01:37,420

We can get it right.



18

00:01:37,430 --> 00:01:39,430

Plus between adding back.



19

00:01:39,440 --> 00:01:39,810

Yes.



20

00:01:41,780 --> 00:01:51,440

And then in the back, we can give it a background color of green and let's give it a height of five



21

00:01:51,440 --> 00:01:51,730

hundred.



22

00:01:52,880 --> 00:01:56,950

And also that we have like thirty five hundred pixels.



23

00:01:56,950 --> 00:02:02,810

So let's go back to our web browser and see what's going on there.



24

00:02:03,560 --> 00:02:05,990

Save it and go back to Google Chrome.



25

00:02:06,290 --> 00:02:07,130

Now we got this.



26

00:02:07,460 --> 00:02:12,470

Let's let's apply for the margin zero and the batting.



27

00:02:12,830 --> 00:02:22,130

Also see about some people apply it for also the body so we can make it for the universe and the body



28

00:02:24,680 --> 00:02:36,260

of zero and then party margin hero and think we can grow it.



29

00:02:36,980 --> 00:02:43,490

Let's say that I want the height of this part to be taken 100 percent off any screen.



30

00:02:43,700 --> 00:02:48,710

Whenever we go, I'm going to show you what I mean.



31

00:02:49,100 --> 00:02:50,590

We can just give it here.



32

00:02:51,110 --> 00:03:00,750

There is something which is called V Atch, which is the height of the screen, the one hundred percent.



33

00:03:01,250 --> 00:03:06,080

This is the ratio of the percentage for the height of the screen.



34

00:03:06,260 --> 00:03:11,380

And we got the W, which is the percentage for the width of the screen.



35

00:03:11,690 --> 00:03:14,250

Let's reload with the receiver.



36

00:03:15,200 --> 00:03:17,090

Let's go back and reload.



37

00:03:17,780 --> 00:03:21,470

Now we got this for the one hundred percent of the screen.



38

00:03:21,710 --> 00:03:24,470

But here is the question.



39

00:03:25,160 --> 00:03:31,100

Will I be having to be scrolling when I make the screen smaller, let's say.



40

00:03:33,950 --> 00:03:43,730

OK, we don't need to scroll down because the 100 feet is taking one hundred percent of any screen,



41

00:03:44,600 --> 00:03:50,560

so let's apply for what if I make this week could be eight hundred.



42

00:03:51,500 --> 00:03:56,070

We're gonna hear us crawling back when I get to the screen scrolling.



43

00:03:56,540 --> 00:03:58,100

I don't want that.



44

00:03:58,400 --> 00:04:06,230

I want this to be having that one hundred percent off any width of screens, because, as you know,



45

00:04:06,530 --> 00:04:13,460

whenever I go a mini screen, larger or smaller from the side, this will be having the one hundred



46

00:04:13,460 --> 00:04:15,170

percent of any screen.



47

00:04:15,470 --> 00:04:18,110

We want to apply the same for the width.



48

00:04:18,350 --> 00:04:24,500

But as you can see from here, the height is different from the width.



49

00:04:25,160 --> 00:04:35,400

What we can do for this part is to adding one hundred v w, which is for the width one hundred three



50

00:04:35,420 --> 00:04:38,330

w safe and go back.



51

00:04:38,660 --> 00:04:44,450

Now we got this for the one hundred percent of the width.



52

00:04:44,810 --> 00:04:46,520

We can make this smaller.



53

00:04:48,290 --> 00:04:54,500

We got no horizontal right here because it just taking the one hundred percent of the width.



54

00:04:55,040 --> 00:04:56,570

OK, that's perfect.



55

00:04:56,570 --> 00:05:04,460

And now we know how to use that the edge and we w let's talk about now with that background.



56

00:05:05,120 --> 00:05:12,020

We can go here, we can just delete this background color.



57

00:05:13,010 --> 00:05:17,810

Let's now add a background image and background.



58

00:05:17,810 --> 00:05:24,350

Imagine you are L and then inside we've got two options.



59

00:05:24,360 --> 00:05:30,230

We can just type the name of this image or we can just get an image from the Internet.



60

00:05:30,590 --> 00:05:32,510

We will do the both ways.



61

00:05:33,410 --> 00:05:35,560

We can go to the Google Chrome here.



62

00:05:35,570 --> 00:05:37,280

I have this image.



63

00:05:37,970 --> 00:05:40,130

We can just copy the image address.



64

00:05:40,130 --> 00:05:42,440

You can get any image you wish to.



65

00:05:43,880 --> 00:05:46,040

Let's go back to our third quarter.



66

00:05:46,670 --> 00:05:56,860

And then in the background image, we can just type the URL paste and then we can go back to our Web



67

00:05:56,870 --> 00:05:58,390

page and see what's going on.



68

00:06:01,720 --> 00:06:02,590

Reload.



69

00:06:03,220 --> 00:06:10,970

Now we've got this background image, but there's something which is called background size into cover.



70

00:06:11,380 --> 00:06:14,260

Let's say that the image is repeating.



71

00:06:14,260 --> 00:06:18,000

Let's just to try this one here.



72

00:06:23,060 --> 00:06:25,490

What's the problem here with getting a copy?



73

00:06:30,530 --> 00:06:35,260

Yes, the image now is repeating, but I don't want that.



74

00:06:36,080 --> 00:06:42,380

What we can do for this part is to add a property which is called back ground into cover.



75

00:06:42,990 --> 00:06:45,530

We can just go back to our Web page.



76

00:06:47,370 --> 00:06:48,410

Yes, yeah.



77

00:06:48,650 --> 00:06:56,540

Background size, which this one we got contained cover and all of that cover.



78

00:06:58,130 --> 00:07:02,690

Let's go back and reload now without this covering all of the paint.



79

00:07:03,890 --> 00:07:05,940

Let's talk about a different thing.



80

00:07:06,200 --> 00:07:13,640

What if I want this book for this part and then go back to our Web page to see the difference?



81

00:07:14,170 --> 00:07:16,870

We can go here and load it up.



82

00:07:16,880 --> 00:07:25,670

Uh, we didn't say, OK, this is repeated, but what if I want this to be just one and you've got one,



83

00:07:25,940 --> 00:07:28,210

two, three, four, five, six.



84

00:07:28,520 --> 00:07:32,550

Let's say that I just want this one to be applied by the rest.



85

00:07:32,980 --> 00:07:36,740

There has to be no let's see how we can make it.



86

00:07:37,500 --> 00:07:39,930

We can go back to our source code.



87

00:07:40,910 --> 00:07:44,600

And there's a property which is called back ground.



88

00:07:44,600 --> 00:07:54,350

Repeat, we can just add ground repeat and here we got no repeat, repeat x axis or repeat y axis and



89

00:07:54,350 --> 00:07:54,950

all of that.



90

00:07:55,580 --> 00:07:57,950

We can just try anything you want.



91

00:07:58,410 --> 00:07:59,810

You can try anything you want.



92

00:07:59,810 --> 00:08:04,570

But right now we can just try the no repeat.



93

00:08:05,390 --> 00:08:08,620

Let's go back to our Web page.



94

00:08:08,640 --> 00:08:17,870

You know, we just got one of them because I told the code to be having no repeating for the background



95

00:08:18,200 --> 00:08:18,740

image.



96

00:08:20,310 --> 00:08:30,620

Let's get it back to back ground size into cover and then we can go back to our first cut to see sorry



97

00:08:30,620 --> 00:08:34,310

to Web browser to just see the difference.



98

00:08:35,090 --> 00:08:36,100

OK, that's good.



99

00:08:37,340 --> 00:08:38,700

Let's make it the same.



100

00:08:38,700 --> 00:08:44,160

But from the image which we have downloaded right here, we can just delete.



101

00:08:44,180 --> 00:08:44,810

No, no.



102

00:08:44,810 --> 00:08:45,920

I think we will need it.



103

00:08:46,610 --> 00:08:49,710

Let's delete this one and add.



104

00:08:49,940 --> 00:08:50,360

Yes.



105

00:08:50,510 --> 00:08:51,770

This image based.



106

00:08:52,250 --> 00:08:55,940

We can go back to our Web page and see what we have right now.



107

00:08:56,520 --> 00:08:59,240

And then we got the image which we downloaded.



108

00:08:59,910 --> 00:09:02,120

Now let's make the screen smaller.



109

00:09:03,050 --> 00:09:04,350

I'm going to show you something.



110

00:09:05,720 --> 00:09:10,310

OK, but the image is changing right here.



111

00:09:11,390 --> 00:09:19,190

I don't want that because I don't I want the position to be center and center for all of the screens.



112

00:09:19,620 --> 00:09:23,870

There is a property which is called back ground position.



113

00:09:24,410 --> 00:09:33,620

We can just go back to our source code and add background position to be center from the x axis and



114

00:09:33,620 --> 00:09:35,750

center from the Y axis.



115

00:09:37,880 --> 00:09:40,910

So this is centered whenever we go.



116

00:09:41,150 --> 00:09:45,260

I think you can see different from the changing of the image.



117

00:09:46,730 --> 00:09:52,520

I wanted to focus in this part because we will delete the code and then say the difference.



118

00:09:56,240 --> 00:10:02,910

Let's just delete the background position and see what we have inside our Web browser.



119

00:10:03,260 --> 00:10:08,440

We can just delete this line and go back to what Crowder?



120

00:10:08,950 --> 00:10:14,570

OK, here, I want you to see the difference when we go into reload and then we'll get a difference



121

00:10:14,570 --> 00:10:23,960

because this is not centered and it's changing when I go here, while if I'm in the background position



122

00:10:23,960 --> 00:10:28,190

of center and center, it will be centered whenever we go.



123

00:10:29,180 --> 00:10:30,460

OK, that's perfect.



124

00:10:30,470 --> 00:10:37,240

And this is the difference between the normal one and Pegram position of center and center.



125

00:10:37,880 --> 00:10:43,070

Now we can just talk about the linear gradient and how we can use it.



126

00:10:44,030 --> 00:10:51,440

The Linear Bridgend is something like I want to add some colors, extra colors to the background.



127

00:10:51,710 --> 00:10:53,620

I'm going to show you have to deal with that.



128

00:10:54,350 --> 00:10:57,700

We can go here and just make it here.



129

00:10:58,040 --> 00:10:58,820

Yes, here.



130

00:10:59,330 --> 00:11:05,090

There's something which which we can add here, which is called linear gradient.



131

00:11:06,000 --> 00:11:16,170

And then we need you to set a direction, we will add three colors or one or two or more than two colors,



132

00:11:16,620 --> 00:11:19,540

but we set the direction in order.



133

00:11:19,560 --> 00:11:24,020

I want it to look that these colors will move in this direction.



134

00:11:24,270 --> 00:11:33,300

We've got right, left, bottom on top left, bottom left job and any direction you wish to add.



135

00:11:33,330 --> 00:11:43,440

So here we can set to where it start with the right and we will add a comma and then the first color,



136

00:11:43,740 --> 00:11:53,640

the first color, we can just set it into the yellow and then we can set in another color, which is



137

00:11:53,670 --> 00:11:55,190

what can be orange.



138

00:11:56,160 --> 00:12:03,870

But we need to add a comma between this property and this property in order to make this as differentiate



139

00:12:03,870 --> 00:12:04,890

between them.



140

00:12:05,550 --> 00:12:11,000

We can go back to our Web page right now because it will not be amazing.



141

00:12:11,010 --> 00:12:13,200

And I'm going to show you why.



142

00:12:14,550 --> 00:12:19,650

Reload never get two colors, which is the yellow and the orange.



143

00:12:19,650 --> 00:12:21,440

But where is the image?



144

00:12:22,260 --> 00:12:25,220

The image is covered by the color.



145

00:12:25,620 --> 00:12:35,010

What we can just do right now is to decrease the degree or the opacity color and we can hover the yellow



146

00:12:35,250 --> 00:12:40,830

just over and don't do not click and decrease the degree from here.



147

00:12:41,700 --> 00:12:47,180

And the same as here when we go back to the Web page.



148

00:12:48,660 --> 00:12:52,200

Now we got the background with a different effect.



149

00:12:52,710 --> 00:12:56,370

We can also add any colors we wish to.



150

00:12:56,820 --> 00:12:58,100

We can add.



151

00:12:58,230 --> 00:13:00,440

Uh, yes.



152

00:13:00,520 --> 00:13:01,740

Can add, Greg.



153

00:13:02,670 --> 00:13:07,870

So now we are having the right you can add any numbers of colors you wish.



154

00:13:08,160 --> 00:13:10,050

So that's good.



155

00:13:11,040 --> 00:13:16,710

Let's just talk about now that Texas alignment and how we can use it.



156

00:13:17,490 --> 00:13:20,320

We can go here inside the division.



157

00:13:20,850 --> 00:13:21,810

Sorry, not here.



158

00:13:22,380 --> 00:13:33,690

We can create X1 and then, uh, uh, yes, I am adding one.



159

00:13:34,650 --> 00:13:36,420

Let's just go to the web, page it.



160

00:13:37,350 --> 00:13:38,250

We got this here.



161

00:13:38,560 --> 00:13:41,550

OK, we will added a ton of this, adding one.



162

00:13:42,480 --> 00:13:46,230

But I'm going to show you something inside this part.



163

00:13:48,020 --> 00:13:53,680

Let's go and create a new one, but not with that division.



164

00:13:53,720 --> 00:13:56,270

It will be after this division.



165

00:13:56,660 --> 00:13:57,890

We can do it here.



166

00:13:58,430 --> 00:14:10,440

Each one with I am adding one, part two and then five here when we load the page.



167

00:14:10,610 --> 00:14:15,710

We got this we got some over Skrull x axis backstroke right now.



168

00:14:17,120 --> 00:14:25,660

Let's just say, yeah, I want to add some food, but I want the code to be applied for just this one.



169

00:14:25,940 --> 00:14:30,740

I'm going to show you a trick we can make here.



170

00:14:32,390 --> 00:14:43,970

Where this one, yes, we can give here that class of PECC and inside it we have one here we can give



171

00:14:43,970 --> 00:14:48,780

it color of white found five big.



172

00:14:49,490 --> 00:14:51,200

Let's go back to our roots thing.



173

00:14:51,200 --> 00:14:53,080

It's mostly what's going on right now.



174

00:14:53,630 --> 00:15:03,230

So this is only applied to this one, but not for this one, because we got the class of the back and



175

00:15:03,230 --> 00:15:06,650

inside at and each one.



176

00:15:07,340 --> 00:15:07,950

That's good.



177

00:15:08,210 --> 00:15:12,050

Now, we don't need this one right here so we can just delete it.



178

00:15:15,320 --> 00:15:22,430

OK, so now we got no over Skrull of X of X axis or right X anyway.



179

00:15:23,060 --> 00:15:27,010

Now let's talk about that text alignment.



180

00:15:27,680 --> 00:15:30,420

We can go to the style X,



181

00:15:33,170 --> 00:15:43,280

and the first time we will talk about is the text line we got here, center and justify, left, right



182

00:15:43,280 --> 00:15:44,600

start and all of that.



183

00:15:45,020 --> 00:15:54,350

We will just try center and and start the start with be not different because it's already at the start.



184

00:15:56,980 --> 00:15:59,510

We can make a line into center.



185

00:15:59,920 --> 00:16:07,150

Let's go back to our reputation now we got this standard and also we have the start.



186

00:16:07,150 --> 00:16:11,200

We can just apply for the DA.



187

00:16:14,200 --> 00:16:16,930

As I told you, it is the same.



188

00:16:17,650 --> 00:16:21,870

And now we can just make for that.



189

00:16:21,970 --> 00:16:26,830

And now we got this at the end.



190

00:16:27,070 --> 00:16:28,330

So it's perfect.



191

00:16:28,540 --> 00:16:32,500

When we make this cream smaller, we got no difference.



192

00:16:32,500 --> 00:16:37,870

It will be already at the end and the background image is centered.



193

00:16:38,380 --> 00:16:39,390

OK, that's good.



194

00:16:40,720 --> 00:16:48,730

Now we are done from the back ground and the next video we can just joke about that clip back and how



195

00:16:48,730 --> 00:16:49,530

we can use it.



196

00:16:49,960 --> 00:16:51,910

So good luck and have fun.