‫Hey, there.
‫Welcome back.
‫Now we need to add background with our section, which is our banner section.
‫So what we are going to do is we are going to have some similar background for this section.
‫The first thing I need to do is I need to discuss about the images.
‫So there are currently three images with our background may not mean that established and then mean
‫that mobile.
‫Why these three images?
‫The reason is whenever we are working with our responsive website, chances are these backgrounds are
‫going to overlap with our content when we try to decrease or increase the size.
‫So if I just right click here, what to inspect.
‫And if I try to decrease or increase the size.
‫You can see the images changing with different sizes here, where the Maxwell talk one two seven nine,
‫that is a different image.
‫And with the photo depiction, there is a different image.
‫So that's how this is going to work.
‫Now, this is important because most of the big website, although some similar pattern with different
‫websites, says they have different background image just to avoid overlapping of this content as well
‫as this background.
‫We are going to follow something similar.
‫It may get back here and add a background image a quick disclaimer.
‫We have an entire section about backgrounds later in this course are currently I'm going to discuss
‫the basics of background image so we can utilize them in our project.
‫Don't worry.
‫Just understand the basic.
‫Right now we have a section about background Slater.
‫You will understand about everything in.
‫The first thing I need to do is simply add background image.
‫And here, since we are utilizing our image, but so we need to use, you are in.
‫Now this, you are told, can have image or directly from the Web or if we have our own image somewhere
‫saved in our system, we need to pass.
‫Remember one important point?
‫Both depart from your style, Garcia says.
‫For example, had my style, CSIS is in some part in some folder, and I need to reach to my background
‫image.
‫So from Styler CSIS, I need to jump on to my media, my Viji and then mean, not sweetie.
‫So that means I need to follow up.
‫But then I've done since that your style or is in a different folder, then you have to define part
‫differently.
‫For now, let us jump on to the media part and then and then may not be if I saved this one.
‫Get back here.
‫OK, we have this image, but that image size is going to trouble us.
‫Okay, let me jump here on the image size.
‫So I like this background.
‫And had I need to select payment sites now, I can utilize the account.
‫That means that we covered the whole section, whole banner section.
‫Get back here.
‫You can see the images here.
‫But I don't want this, I want something that I want to stretch out here.
‫Stretch it out.
‫Basically, I want to increase that size.
‫So what I can do is instead of using power, I can discover is basically 100 percent.
‫So that means the image sizes 100 percent or whatever the parent is, which is our section.
‫What I can do here is I can increase this image size.
‫Maybe I can take 110 pics.
‫You see, it's increasing.
‫Maybe 150 here saved.
‫It's too big now it's here and there now.
‫Maybe 170, if I save this one.
‫You can say it's increasing.
‫And the problem here is the position is not fixed.
‫So are images starting from here, it's increasing and it's increasing on the right site.
‫What I can do is I can move my image here and there, so I can move this image here.
‫This whole image?
‫Let me right click here.
‫Select my image, this is my image, and I can move this image on the left side or on the right side,
‫so basically I can change position so that given the property name will be background position.
‫Now, this background position takes two arguments on, I should say, value, the first value will
‫be about the horizontal axis, which is the x axis.
‫The second value will be the vertical axis.
‫So if I say I want to move it to 46 percent horizontally and four percent vertically, save this one.
‫You can see it move now.
‫Now here, if I try to select this value, if I try to increase it, you can see I increase this value.
‫This is moving here.
‫If I decrease this value of this is moving out.
‫So that's this value, OK?
‫So let me change this background sites to maybe one 75 percent if I say one percent.
‫You can see this looks pretty hard wired because this is one single image.
‫And then it repeats itself multiple times, multiple times.
‫We can add a value of no repeat and that will restrict that.
‫So basically what we can do here is the property background repeat.
‫By default, it repeat.
‫So I can see no repeat.
‫Save this one.
‫Get back here.
‫Now I try to ah, to change the size.
‫170, let me take you 10 percent, you can see this is the image.
‫I say 50, you can see this is the image.
‫Here I see 170 nights here.
‫We can change the background position as well as not just horizontally but vertically.
‫Also, we can increase the percentage that will move up, decrease the percentage it will move down,
‫increase the percentage it's moving towards the left side, decrease the percentage, it's moving towards
‫the right side.
‫Now that a lot of hit and miss with these values because you are not going to get these values in the
‫first.
‫To be honest, I got this value after two or three or four trials, so it totally depends how you try
‫this.
‫Now, if I refresh, OK?
‫That's looks pretty awesome.
‫So I hope you got the idea about how background image work are image, if you're using any type of gradient,
‫then we need to provide some size because at this point of time, images, including some width and
‫height.
‫But if I had any type of gradient color that includes zero height, so we need to add some height and
‫we can change the height of our current image using background size.
‫We can also change the position using background position and also change its default value from repeat
‫to not repeat.
‫That said, that's the basic aim of this picture to understand about this point.
‫Now, in future, we will move towards responsive Parc Y because of price.
‫If you'll see right now, if I try to do some type of juggling between tablet, mobile and full screen,
‫you will see this background images creating tons of overlapping.
‫This is a problem here.
‫So what we can do is we can simply change the image and altered size and position, and that is why
‫we have these three images.
‫I hope you got the idea.
‫So that's it for this lecture, I hope this section is ready for now and we are going to go towards
‫date for that part.
‫That's all for this one.
‫Thank you for calling.
‫And I see you guys in the next one.