OK, guys, now we can just talk about the backgrounds and also we can talk about the height and the
width by a different way.
Uh, let's just create a new file and call it back ground dot at to A.M. and then we will make it.
Oh, and see if we can go here and then you file and call it back around NTFS.
And then here we will put Achey at five.
And then for this part we can just back, back around and we will connect between this esteemable file
and that's the best we can make here.
Link our title title changed and actually f uh, back dot.
Let's close this angled bracket.
Let's see what we have here.
OK, good.
And after this part, we will add our first division.
We can we can just give it a class back.
That's good.
Now we can just go to that file and see what we can add inside.
Subtract here.
We can get it right.
Plus between adding back.
Yes.
And then in the back, we can give it a background color of green and let's give it a height of five
hundred.
And also that we have like thirty five hundred pixels.
So let's go back to our web browser and see what's going on there.
Save it and go back to Google Chrome.
Now we got this.
Let's let's apply for the margin zero and the batting.
Also see about some people apply it for also the body so we can make it for the universe and the body
of zero and then party margin hero and think we can grow it.
Let's say that I want the height of this part to be taken 100 percent off any screen.
Whenever we go, I'm going to show you what I mean.
We can just give it here.
There is something which is called V Atch, which is the height of the screen, the one hundred percent.
This is the ratio of the percentage for the height of the screen.
And we got the W, which is the percentage for the width of the screen.
Let's reload with the receiver.
Let's go back and reload.
Now we got this for the one hundred percent of the screen.
But here is the question.
Will I be having to be scrolling when I make the screen smaller, let's say.
OK, we don't need to scroll down because the 100 feet is taking one hundred percent of any screen,
so let's apply for what if I make this week could be eight hundred.
We're gonna hear us crawling back when I get to the screen scrolling.
I don't want that.
I want this to be having that one hundred percent off any width of screens, because, as you know,
whenever I go a mini screen, larger or smaller from the side, this will be having the one hundred
percent of any screen.
We want to apply the same for the width.
But as you can see from here, the height is different from the width.
What we can do for this part is to adding one hundred v w, which is for the width one hundred three
w safe and go back.
Now we got this for the one hundred percent of the width.
We can make this smaller.
We got no horizontal right here because it just taking the one hundred percent of the width.
OK, that's perfect.
And now we know how to use that the edge and we w let's talk about now with that background.
We can go here, we can just delete this background color.
Let's now add a background image and background.
Imagine you are L and then inside we've got two options.
We can just type the name of this image or we can just get an image from the Internet.
We will do the both ways.
We can go to the Google Chrome here.
I have this image.
We can just copy the image address.
You can get any image you wish to.
Let's go back to our third quarter.
And then in the background image, we can just type the URL paste and then we can go back to our Web
page and see what's going on.
Reload.
Now we've got this background image, but there's something which is called background size into cover.
Let's say that the image is repeating.
Let's just to try this one here.
What's the problem here with getting a copy?
Yes, the image now is repeating, but I don't want that.
What we can do for this part is to add a property which is called back ground into cover.
We can just go back to our Web page.
Yes, yeah.
Background size, which this one we got contained cover and all of that cover.
Let's go back and reload now without this covering all of the paint.
Let's talk about a different thing.
What if I want this book for this part and then go back to our Web page to see the difference?
We can go here and load it up.
Uh, we didn't say, OK, this is repeated, but what if I want this to be just one and you've got one,
two, three, four, five, six.
Let's say that I just want this one to be applied by the rest.
There has to be no let's see how we can make it.
We can go back to our source code.
And there's a property which is called back ground.
Repeat, we can just add ground repeat and here we got no repeat, repeat x axis or repeat y axis and
all of that.
We can just try anything you want.
You can try anything you want.
But right now we can just try the no repeat.
Let's go back to our Web page.
You know, we just got one of them because I told the code to be having no repeating for the background
image.
Let's get it back to back ground size into cover and then we can go back to our first cut to see sorry
to Web browser to just see the difference.
OK, that's good.
Let's make it the same.
But from the image which we have downloaded right here, we can just delete.
No, no.
I think we will need it.
Let's delete this one and add.
Yes.
This image based.
We can go back to our Web page and see what we have right now.
And then we got the image which we downloaded.
Now let's make the screen smaller.
I'm going to show you something.
OK, but the image is changing right here.
I don't want that because I don't I want the position to be center and center for all of the screens.
There is a property which is called back ground position.
We can just go back to our source code and add background position to be center from the x axis and
center from the Y axis.
So this is centered whenever we go.
I think you can see different from the changing of the image.
I wanted to focus in this part because we will delete the code and then say the difference.
Let's just delete the background position and see what we have inside our Web browser.
We can just delete this line and go back to what Crowder?
OK, here, I want you to see the difference when we go into reload and then we'll get a difference
because this is not centered and it's changing when I go here, while if I'm in the background position
of center and center, it will be centered whenever we go.
OK, that's perfect.
And this is the difference between the normal one and Pegram position of center and center.
Now we can just talk about the linear gradient and how we can use it.
The Linear Bridgend is something like I want to add some colors, extra colors to the background.
I'm going to show you have to deal with that.
We can go here and just make it here.
Yes, here.
There's something which which we can add here, which is called linear gradient.
And then we need you to set a direction, we will add three colors or one or two or more than two colors,
but we set the direction in order.
I want it to look that these colors will move in this direction.
We've got right, left, bottom on top left, bottom left job and any direction you wish to add.
So here we can set to where it start with the right and we will add a comma and then the first color,
the first color, we can just set it into the yellow and then we can set in another color, which is
what can be orange.
But we need to add a comma between this property and this property in order to make this as differentiate
between them.
We can go back to our Web page right now because it will not be amazing.
And I'm going to show you why.
Reload never get two colors, which is the yellow and the orange.
But where is the image?
The image is covered by the color.
What we can just do right now is to decrease the degree or the opacity color and we can hover the yellow
just over and don't do not click and decrease the degree from here.
And the same as here when we go back to the Web page.
Now we got the background with a different effect.
We can also add any colors we wish to.
We can add.
Uh, yes.
Can add, Greg.
So now we are having the right you can add any numbers of colors you wish.
So that's good.
Let's just talk about now that Texas alignment and how we can use it.
We can go here inside the division.
Sorry, not here.
We can create X1 and then, uh, uh, yes, I am adding one.
Let's just go to the web, page it.
We got this here.
OK, we will added a ton of this, adding one.
But I'm going to show you something inside this part.
Let's go and create a new one, but not with that division.
It will be after this division.
We can do it here.
Each one with I am adding one, part two and then five here when we load the page.
We got this we got some over Skrull x axis backstroke right now.
Let's just say, yeah, I want to add some food, but I want the code to be applied for just this one.
I'm going to show you a trick we can make here.
Where this one, yes, we can give here that class of PECC and inside it we have one here we can give
it color of white found five big.
Let's go back to our roots thing.
It's mostly what's going on right now.
So this is only applied to this one, but not for this one, because we got the class of the back and
inside at and each one.
That's good.
Now, we don't need this one right here so we can just delete it.
OK, so now we got no over Skrull of X of X axis or right X anyway.
Now let's talk about that text alignment.
We can go to the style X,
and the first time we will talk about is the text line we got here, center and justify, left, right
start and all of that.
We will just try center and and start the start with be not different because it's already at the start.
We can make a line into center.
Let's go back to our reputation now we got this standard and also we have the start.
We can just apply for the DA.
As I told you, it is the same.
And now we can just make for that.
And now we got this at the end.
So it's perfect.
When we make this cream smaller, we got no difference.
It will be already at the end and the background image is centered.
OK, that's good.
Now we are done from the back ground and the next video we can just joke about that clip back and how
we can use it.
So good luck and have fun.