1
00:00:00,630 --> 00:00:01,250
‫Hey, there.

2
00:00:01,410 --> 00:00:02,130
‫Welcome back.

3
00:00:02,370 --> 00:00:05,900
‫Now in this lecture, let us discuss about background clip.

4
00:00:06,570 --> 00:00:11,850
‫Now there is a specific reason why I took a separate lecture to discuss this topic.

5
00:00:12,510 --> 00:00:19,290
‫The first thing is if you just generalize this image right now, our background image, we are utilizing

6
00:00:19,710 --> 00:00:21,450
‫100 percent of data.

7
00:00:21,600 --> 00:00:27,810
‫That means if I say hide this 50 years, that means we are completely covering this white privilege.

8
00:00:28,170 --> 00:00:35,340
‫If I say are better 100 percent or if I say a word, this which that means we are covering the 100 percent

9
00:00:35,340 --> 00:00:40,220
‫of the available word, so we are going to cover 50 years of debate.

10
00:00:40,410 --> 00:00:42,300
‫So this is our current big size.

11
00:00:43,420 --> 00:00:51,100
‫And we have a bonus sitting, which can help us to clip our background within this work as well as height.

12
00:00:51,370 --> 00:00:56,170
‫So for now, let me take 50 instead of 50, let me take the entire weight.

13
00:00:56,590 --> 00:00:58,060
‫And this is our current height.

14
00:00:58,810 --> 00:01:05,370
‫So red background clip, I can define how far the background should extend for there.

15
00:01:05,620 --> 00:01:07,840
‫So that means if I say background.

16
00:01:10,160 --> 00:01:12,710
‫Clip here you will see 13 option.

17
00:01:13,880 --> 00:01:19,310
‫The first one is about border walks, remember the concept of border walks, then we have content boxed

18
00:01:19,310 --> 00:01:24,290
‫and we have batting box and then we have certain others like fixed and a few others.

19
00:01:24,710 --> 00:01:30,500
‫So for example, let me take a border box now before explaining this concept, let me add some border.

20
00:01:31,990 --> 00:01:38,890
‫So let me say border here, I'm going to take 10 pixels dotted and then I'm going to take.

21
00:01:40,350 --> 00:01:40,600
‫Lou.

22
00:01:41,490 --> 00:01:49,320
‫And let me also add some, I'm going to use batting 510 so we can definitely see this base now currently

23
00:01:49,320 --> 00:01:51,090
‫are setting US border walks.

24
00:01:51,900 --> 00:01:58,710
‫Now Herbert border walks, we mean that we can stretch our image, stretch out a background image behind

25
00:01:58,710 --> 00:01:59,690
‫the border itself.

26
00:01:59,730 --> 00:02:02,640
‫So if I jump in, you can see our image.

27
00:02:02,640 --> 00:02:06,660
‫Background image is also coming behind the background itself.

28
00:02:07,110 --> 00:02:13,230
‫So if you see, if required, are image can extend behind the background itself.

29
00:02:14,530 --> 00:02:21,520
‫On both the side, horizontally as well as vertically, so if required, R-Mich. can extend behind the

30
00:02:21,520 --> 00:02:22,090
‫background.

31
00:02:22,600 --> 00:02:24,370
‫But if I see a content box.

32
00:02:26,320 --> 00:02:32,020
‫That means we are not going to touch back down, we can only cover content area, get back here.

33
00:02:32,680 --> 00:02:35,030
‫So at this point of time, this is content area.

34
00:02:35,050 --> 00:02:37,040
‫This is fighting and this is background.

35
00:02:37,450 --> 00:02:40,450
‫Here you can see content bounding background.

36
00:02:40,930 --> 00:02:46,480
‫So that means our background image can only cover content area a member at this point.

37
00:02:47,950 --> 00:02:54,130
‫Now there is something like writing books that means content plus biting area.

38
00:02:54,370 --> 00:02:55,150
‫Get back here.

39
00:02:55,810 --> 00:03:02,510
‫You can see it is not going to touch or cover the border area, it is only going to cover the content

40
00:03:02,550 --> 00:03:03,710
‫plus batting area.

41
00:03:03,730 --> 00:03:04,630
‫This and this.

42
00:03:05,500 --> 00:03:08,620
‫I hope you got the idea for these are the three settings.

43
00:03:09,010 --> 00:03:10,840
‫Now there are a lot of things that we can do.

44
00:03:10,930 --> 00:03:14,350
‫For example, if I add some random text here.

45
00:03:18,070 --> 00:03:19,150
‫And save this one.

46
00:03:19,600 --> 00:03:21,460
‫And if I see text here.

47
00:03:23,390 --> 00:03:24,830
‫Say, get back here.

48
00:03:26,820 --> 00:03:28,920
‫Now, how do you see this is not working?

49
00:03:29,220 --> 00:03:30,510
‫And remember why?

50
00:03:31,230 --> 00:03:37,140
‫Because we are utilizing Chrome, that means you also need to add that Gate 413 properties.

51
00:03:37,470 --> 00:03:40,860
‫So that means I have to update this with the gate itself.

52
00:03:41,460 --> 00:03:43,830
‫And if I save this one, get back here.

53
00:03:44,640 --> 00:03:46,500
‫Here you can see this is our text.

54
00:03:46,740 --> 00:03:48,510
‫I'm behind this text.

55
00:03:48,720 --> 00:03:50,550
‫We have our background.

56
00:03:50,670 --> 00:03:51,750
‫This is the background.

57
00:03:52,290 --> 00:03:59,910
‫So what I mean by this when we are utilizing this background clip, it means we have defined that,

58
00:03:59,910 --> 00:04:03,390
‫OK, Gauhati background only for this text.

59
00:04:03,510 --> 00:04:07,620
‫So behind this text behind this text, there is some background.

60
00:04:08,040 --> 00:04:14,010
‫OK, if I say, let's change this color transparent, so let's send our text is transparent.

61
00:04:14,340 --> 00:04:16,860
‫That means we can see this background.

62
00:04:17,280 --> 00:04:18,060
‫Get back here.

63
00:04:18,610 --> 00:04:20,430
‫OK, now you can see this background.

64
00:04:21,000 --> 00:04:22,410
‫Now let me explain what I did.

65
00:04:23,470 --> 00:04:31,600
‫I have dated my background clip and define that only cover the space that is related to what sort of

66
00:04:31,600 --> 00:04:34,410
‫background is only available behind our text.

67
00:04:34,930 --> 00:04:41,440
‫Now, if I change my color of my text or transparent, that means we are able to see our background.

68
00:04:41,740 --> 00:04:46,060
‫So the color or the pattern that you are seeing right now is about the background.

69
00:04:47,240 --> 00:04:55,010
‫So this is some important stuff why we can now add colors in the form of gradient itself.

70
00:04:55,430 --> 00:05:00,050
‫So if I say linear gradient and had, I can pass multiple values.

71
00:05:02,720 --> 00:05:09,530
‫For example, let me take the blue and the second great big blue and change it.

72
00:05:09,770 --> 00:05:10,820
‫So let me take.

73
00:05:12,130 --> 00:05:14,830
‫Maybe something related to Green.

74
00:05:16,180 --> 00:05:17,350
‫And save this one.

75
00:05:17,500 --> 00:05:18,370
‫Get back here.

76
00:05:19,520 --> 00:05:20,750
‫You can see it changed.

77
00:05:21,170 --> 00:05:23,730
‫OK, let me try to take something really different.

78
00:05:23,750 --> 00:05:28,970
‫Let me try to dig something related to yellow, save this one, get back here.

79
00:05:29,180 --> 00:05:32,810
‫You can see now we have our gradient effect color.

80
00:05:33,470 --> 00:05:35,540
‫That's how you can control your text.

81
00:05:35,840 --> 00:05:40,190
‫Not only this, not just the gradient back, not just the image part.

82
00:05:40,490 --> 00:05:42,110
‫You can also utilize GIF.

83
00:05:42,260 --> 00:05:50,580
‫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

84
00:05:50,600 --> 00:05:51,500
‫saved this one.

85
00:05:51,890 --> 00:05:52,550
‫You can see.

86
00:05:54,560 --> 00:05:58,010
‫Since we have a curfew, you see, this is our current gear.

87
00:05:58,790 --> 00:05:59,750
‫It's a free gift.

88
00:06:00,050 --> 00:06:05,060
‫And I utilize this on, you can see now our background is a gift.

89
00:06:06,190 --> 00:06:10,540
‫If I remove this property, save this one, it is not going to work.

90
00:06:11,940 --> 00:06:12,460
‫Why?

91
00:06:12,480 --> 00:06:17,140
‫Because we are utilizing Chrome, and that's where this Web kit comes into picture.

92
00:06:17,850 --> 00:06:23,650
‫So I hope you got the idea how we are updating these thing, and I hope you got the idea what background

93
00:06:23,650 --> 00:06:24,510
‫clip means.

94
00:06:25,380 --> 00:06:29,910
‫The simple definition is that the minority background painting area.

95
00:06:30,180 --> 00:06:37,050
‫So if I say background painting area sticks, that means odd background will stretch towards the text

96
00:06:37,050 --> 00:06:37,560
‫itself.

97
00:06:37,890 --> 00:06:41,010
‫If I say content box, it will only cover content.

98
00:06:41,340 --> 00:06:45,540
‫If I say bounding box, it will only cover content as padding.

99
00:06:45,750 --> 00:06:50,190
‫And if I say a border box, it will cover content padding plus border itself.

100
00:06:50,760 --> 00:06:53,970
‫So that's how we are going to work with our background clip.

101
00:06:55,190 --> 00:06:56,450
‫I hope you got the idea.

102
00:06:56,490 --> 00:06:58,790
‫That's all natural for background.

103
00:06:59,030 --> 00:07:04,250
‫Now let's move on to our next concept and discuss few other important things with CSIS.

104
00:07:04,880 --> 00:07:07,670
‫Thank you for calling, and I see you guys in the next one.