Release we are going to discuss about the background How can you add the background background that means we are talking about the background color and the background images. So, we take some examples go to the shader calm as you can see we have the background image here so as you can see, this is the vagrant image is showing the vagrant image the color background image and this is the very wrong colors. So how can you define the colors in the image, so right click Inspect Element select your element and as you can see this is the color background. Okay, so now this is a home image. So right click, select element, find the element with the background image is exist. I think this background image is exist here so you can see this is the background image, background image and you are so you This way you can add the background image.

So how can you do that? First of all, I need to comment three words so you can easily get the code. I'm saying, I have a div. Basically, there is a container. So I can see that you have the basic knowledge of HTML. So there is a container.

I'm saying that I have a div. And now I'm going to add some properties to my div. First of all. You can also add the properties like this, I'm saying the background background color. Background color is red, or suppose now go to your page, refresh the page. Now as you can see, nothing's happened.

Why? Because your div is empty if you are adding some elements here. First of all, copy these elements and paste these elements here all I'm very lazy person, go to your page refresh the page. So now as you can see, we have added three elements in there so that's why it's showing. Okay, now what I need I need to add the height and width, I'm saying what I'm saying words equals to 500,000 or suppose not all 500 pixels and I'm saying height is 500. Okay, go to your page refresh the page.

Okay, now I'm saying 300 by 300 300 by go to a page refresh the page. So now we can see we have 300 by 300. So this is the property worth and this is the property hi and these are the values so we are adding three properties and values like this. Okay, so now first of all, you need to add the background color like this. Or you can also add the background image. So how can you add the background image?

First of all you need the image in the same folder where your CSS exist. And I need to have Okay, you have your black dot html, sorry, Lego jpg. This is a JPG file. Now how can you add the background image? So I'm saying remove the background color, I'm saying background. Background Image, first of all, then you are and in the URL, you can use the black dot jpg image.

Go to your page, refresh the page. Okay, now it's not showing any image, why it's not showing. Okay. I've talked The semicolon, so that's why it's not showing go to the page refresh the page. Now, as you can see, you have just added the vagrant image. So, if you are not add adding or not using the semicolon and you have you have more than one properties and values.

So, as you can see these this code is not working. So, your code for words if you are not adding the semicolon Okay, good you refresh the page. Now, as you can see we have added you can also use the repeat properties are suppose if I'm saying background background repeat. So, this is a background repeat. I'm saying no repeat. So here is no repeat that means.

Now as you can see, you have your image but it's repeating If you add the background repeat no repeat property. So you can see it's not repeating if you want to repeat to x axis, you can also use the repeat x axis which you pay to refresh the visual. Now as you can see, it's repeating from the x axis, you can also use the y axis, as you can see repeating on the y axis. And you can also use for their own positions. So how can you use the position for suppose I'm saying that wrong, and I'm saying position. So you can also I'm saying right position and the top right top goes up, refresh the page.

Now as you can see, it's shown on the right. If I'm saying left, hop, go to your page, refresh the page. Now as you can see, it's saying left off I'm saying left, bottom, refresh the page. Now you can see it's showing it's showing left. Okay. So now if you are adding the fixed are suppose Okay, if I'm saying that the background attachment is fixed.

So now go to page refresh the page. As you can see it's now fixed. And if you have more than one elements here refresh the page. As you can see, now it's showing like this. As you can see, it's showing the fact. So we say that this is a parallax parallax effect where you are adding the Property what is the background attachment phase.

So that means this is the attachment. I'm going to show you it's in parallel. What best teams retrofit. Second I'm going to show you where you can use the parallax effect or the attachment. sightings demo. Openness is a demo.

Oh, as you can see, this is a parallax effect. Because this is the parallax or the big rotation faced okay. So also like this As you can see this, this this so in this way you can use the background or punishment. So I think this is enough for today in the next session we are going to cover the border property in the CSS language