‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us discuss about background clip.
‫Now there is a specific reason why I took a separate lecture to discuss this topic.
‫The first thing is if you just generalize this image right now, our background image, we are utilizing
‫100 percent of data.
‫That means if I say hide this 50 years, that means we are completely covering this white privilege.
‫If I say are better 100 percent or if I say a word, this which that means we are covering the 100 percent
‫of the available word, so we are going to cover 50 years of debate.
‫So this is our current big size.
‫And we have a bonus sitting, which can help us to clip our background within this work as well as height.
‫So for now, let me take 50 instead of 50, let me take the entire weight.
‫And this is our current height.
‫So red background clip, I can define how far the background should extend for there.
‫So that means if I say background.
‫Clip here you will see 13 option.
‫The first one is about border walks, remember the concept of border walks, then we have content boxed
‫and we have batting box and then we have certain others like fixed and a few others.
‫So for example, let me take a border box now before explaining this concept, let me add some border.
‫So let me say border here, I'm going to take 10 pixels dotted and then I'm going to take.
‫Lou.
‫And let me also add some, I'm going to use batting 510 so we can definitely see this base now currently
‫are setting US border walks.
‫Now Herbert border walks, we mean that we can stretch our image, stretch out a background image behind
‫the border itself.
‫So if I jump in, you can see our image.
‫Background image is also coming behind the background itself.
‫So if you see, if required, are image can extend behind the background itself.
‫On both the side, horizontally as well as vertically, so if required, R-Mich. can extend behind the
‫background.
‫But if I see a content box.
‫That means we are not going to touch back down, we can only cover content area, get back here.
‫So at this point of time, this is content area.
‫This is fighting and this is background.
‫Here you can see content bounding background.
‫So that means our background image can only cover content area a member at this point.
‫Now there is something like writing books that means content plus biting area.
‫Get back here.
‫You can see it is not going to touch or cover the border area, it is only going to cover the content
‫plus batting area.
‫This and this.
‫I hope you got the idea for these are the three settings.
‫Now there are a lot of things that we can do.
‫For example, if I add some random text here.
‫And save this one.
‫And if I see text here.
‫Say, get back here.
‫Now, how do you see this is not working?
‫And remember why?
‫Because we are utilizing Chrome, that means you also need to add that Gate 413 properties.
‫So that means I have to update this with the gate itself.
‫And if I save this one, get back here.
‫Here you can see this is our text.
‫I'm behind this text.
‫We have our background.
‫This is the background.
‫So what I mean by this when we are utilizing this background clip, it means we have defined that,
‫OK, Gauhati background only for this text.
‫So behind this text behind this text, there is some background.
‫OK, if I say, let's change this color transparent, so let's send our text is transparent.
‫That means we can see this background.
‫Get back here.
‫OK, now you can see this background.
‫Now let me explain what I did.
‫I have dated my background clip and define that only cover the space that is related to what sort of
‫background is only available behind our text.
‫Now, if I change my color of my text or transparent, that means we are able to see our background.
‫So the color or the pattern that you are seeing right now is about the background.
‫So this is some important stuff why we can now add colors in the form of gradient itself.
‫So if I say linear gradient and had, I can pass multiple values.
‫For example, let me take the blue and the second great big blue and change it.
‫So let me take.
‫Maybe something related to Green.
‫And save this one.
‫Get back here.
‫You can see it changed.
‫OK, let me try to take something really different.
‫Let me try to dig something related to yellow, save this one, get back here.
‫You can see now we have our gradient effect color.
‫That's how you can control your text.
‫Not only this, not just the gradient back, not just the image part.
‫You can also utilize GIF.
‫So if I use my you and I have a GIFs, I just need to jump to my media and head as my background gif
‫saved this one.
‫You can see.
‫Since we have a curfew, you see, this is our current gear.
‫It's a free gift.
‫And I utilize this on, you can see now our background is a gift.
‫If I remove this property, save this one, it is not going to work.
‫Why?
‫Because we are utilizing Chrome, and that's where this Web kit comes into picture.
‫So I hope you got the idea how we are updating these thing, and I hope you got the idea what background
‫clip means.
‫The simple definition is that the minority background painting area.
‫So if I say background painting area sticks, that means odd background will stretch towards the text
‫itself.
‫If I say content box, it will only cover content.
‫If I say bounding box, it will only cover content as padding.
‫And if I say a border box, it will cover content padding plus border itself.
‫So that's how we are going to work with our background clip.
‫I hope you got the idea.
‫That's all natural for background.
‫Now let's move on to our next concept and discuss few other important things with CSIS.
‫Thank you for calling, and I see you guys in the next one.