Hello, everyone, and welcome back.
In today's video, we will learn how to add background to our demon elements.
We can fill the background with a color.
We can use images as a background.
And we can use gradient as a backdrop.
We already know how to like color as a background.
So let's try to we can say this is the Web page that we have.
Let's go the background color.
Let's bring about goodies to here.
So let's try giving about don't go to this head of.
So this is the head of elementally already given it some states.
So let's give it a background color.
Let's say cash in on you five five.
Let's save it.
And as you can see of a page, has a light blue background color.
Now, let's see, you want to add a bathroom image to it to specify a bathroom.
That's an image we can use the bathroom image property.
So let's try that.
So let's use about our eMESH property, so to use about our image, we need an image first.
So I've got some image here.
So let's try this one.
Coming back here.
I'm disgusted by an image we use this.
You are better and we busser mission you let's save it.
And as you can see, you've got this image in the background.
So if I had been there, it's here.
So this is how the images.
But by default, it is being repeated to fill all the available space.
Let's say we don't want to repeat it.
For that, we can use the proper medical background to beat.
So let's add that here.
So background JBC, let's see, no, repeat the table.
And as you can see here, no, we can see only one in which it's not being depleted.
Let's stretching in the background image dimensions for that.
We have another property called background sites.
So let's try that.
It except Stewart is a whip and height separated by space.
Let's say 200 pixels by 200 pixels the table.
And as you can see, the image becomes became smaller.
Let's try giving it a value.
Bigger than this div.
So the height of Devore's to 120 pixels.
Let's try using Aboutaleb safety.
Turn the pixels back into more pixels.
It's Eamon.
And as you can see, the image has been cropped and it did not make the division scrollable.
This is because the image is a background and not the content.
Let's bring it back to original size.
So let's just move this.
Let's hear it right now.
This background image is in the top left corner.
Let's try and bring it around.
So so for that, we have another property going back on position.
So here we can give you a sea dog.
Let's save it.
As you can see it move to the center of the screen, horizontal at the top.
Then you've got left.
Let's say that, as you can see, it's in the center of the screen.
But on the left hand side.
Similarly, let's try the water.
Let's have it again.
It's in the center of the screen.
But at the bottom.
Simultaneous, right?
Right.
It does now on the right hand side.
And then we've got another rally call center now, as you can see the images in the center of the division.
Now, if we want to move it around, say, to the top left corner, we could use a combination of these
values so we could do.
Top left table.
Similarly, the TV wanted in the bottom right.
So we could do something like this.
So bottom line.
Right.
Taylor.
And now, as you can see, it is on the bottom right corner of the division.
Now, say you want this image to be a full screen background.
So for that, the background size property, except two more values.
Contain and go.
So let's try these.
Let's remove this, let's Abdul back on sites, property and let's say contain.
Let's leave it.
And as you can see, it's taking the entire height, but not the width of the division.
This is happening because the images zoomed to fill the space without dropping any part of the image.
So that's what this finding does.
Now, let's try the other Oliver Twist cover.
Let's save it.
Now, as you can see, the images zoomed through.
All this piece of this image looks a bit grainy because it is of a military solution.
That's right.
Using image with a higher resolution.
So we've got another image here.
Let's replace this filing, so in sort of this one that speaks to me running the table.
And this looks much better.
That's all for today, guys.
If there's something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And Dick.