Last harness session, let us learn how to use the background property of CSS in HTML page. Background has got all these properties, background color, image, position, attachment and repeat. Color. Of course, you know, image means if you want to have an image in the background of your webpage attachment, whether you want to have the image scrolling together with a text or it has to be fixed with repeat whether you want the image to be repeated in on the webpage in a horizontal manner, or in a vertical manner, or in a particular position you are going to specify that don't want to give individual property and value then you can use background with backgrounds you can give the values directly background color, the first one is the color. The second one is the image. The third one is the background repeat property.

And the last one is background. That's it If you are using them as individual properties you can give in whichever order you want. But if you want to use the background property, this is the order which you have to follow color image, repeat and attachment. Now, let us go to sublime, and we will see an example of using the background property of CSS. My HTML page is now ready with the content. I have added content so that I am getting a scroll bar.

Only if there is a scroll bar you can see the properties of background properly. Next, let me add the styling. Before going into the styling. Let us add the CSS package to Sublime Text because it will be very helpful to add the property. For this go to preferences. Select package control.

Now, your package control is open. Select Install package. The repository is getting loaded, you can see that it is showing loading repositories. Once it is loaded, the new window will open. Now you need to specify what package you want. So we want CSS CSS.

Already CSS package is installed for me. So it is not visible over here for you. It will be visible, you selected automatically CSS package will be installed for for your Sublime Text. Let me just go back. I'll press escape. Now, I will add the background properties one by one.

So I want a body tag. So for the body tag only I want to add a background property, you know how to use the background color. So first, let me start with background color. See automatically all the properties related to background is coming over here. Select background color, give a color free. Let me save this and minimize the sublime text.

And they will open chrome on let me save this I will refresh okay right click open in browser now you can see that the background color is first died a background image. For this I need an image I have added an images folder inside this CSS folder. Let me open images I have got panda one dot jpg. Now let me just attach it here it is background image equal to URL round brackets within which I need to specify the path images slash panda one dot JPG right. I have done this, save it come and refresh. You can see that the images shown over here now let us add background repeat by the father this background rip I mean they may just getting repeated.

I don't want to repeat The image so I can just give no repeat semicolon, save, come back and refresh. You can see on the top, only one image is being shown. If you don't want the image in this particular position, you can also specify that and now it is actually in the top left corner, if you want it in the bottom right, that also you can specify using background position. And one more thing is also their background attachments, whether you want it as fixes are scrollable. Now, to see this properly, I will give it a repeat attachment. fix it.

Fix it means the image will be successful that text alone will scroll. Scroll means the image also will scroll to With the text. Now, I will save this. I will come back here, I will refresh. Let me maximize the corner. I mean the browser.

Let me just scroll it. You can you see the image is fixed says the text alone scrolls. Right? They may just fix it in the background. What if they want to change it, I'll go to sublime. Now instead of fixing it, I will use scroll.

Save this. Come back, refresh. Now, let me again scrolling. You can see the image also scrolls together with the content. When you use scroll property, I mean scroll value for the background attachment property. The image also been scrolled together with that content.

If you use fixes, the image will be fixed set the content on the top alone we'll scroll. So that is the difference. Mixed background position. Now, let me just give it up top left and here it should be no repeat save, refresh top left. Can you see this one more thing also I want to show you we are seeing repeat and no repeats. Similarly, you can repeat it either on the x axis or the y axis that is either horizontally or vertically that also I will show you repeat yes save this refresh, can you see it is repeated only in the x axis if you want to repeat only in the y axis that also is possible, you can just specify repeat right.

So, it will be repeated vertically right. So, these are the different properties that are for background. We have seen everything like how to use color image position repeat attachment. In the next session, let us learn about the text property of CSS and how to use it in HTML page. Thank you.