1
00:00:00,840 --> 00:00:01,440
‫Hey, there.

2
00:00:01,560 --> 00:00:07,650
‫Welcome back, Siobhan, the site now in this specific lecture, we are going to discuss about background,

3
00:00:08,220 --> 00:00:10,190
‫so backgrounds are pretty important.

4
00:00:10,200 --> 00:00:15,480
‫If you visit any type of site, you will see different background, some utilized background color,

5
00:00:15,660 --> 00:00:21,150
‫some utilized background image and some utilize different other properties that we are going to understand

6
00:00:21,180 --> 00:00:22,290
‫about background.

7
00:00:23,440 --> 00:00:28,840
‫Now, remember one thing, whenever I see a background image that doesn't mean we are going to cover

8
00:00:28,840 --> 00:00:33,260
‫whole background, background image can be said for a particular element.

9
00:00:33,280 --> 00:00:36,230
‫Maybe I have created or do so we have a day.

10
00:00:36,340 --> 00:00:42,260
‫Maybe this is 200 by 200, and I can add a background color to this division itself.

11
00:00:42,700 --> 00:00:49,840
‫Maybe I create a section and this section is only specific to one block only so I can add background

12
00:00:49,840 --> 00:00:51,970
‫color to this specific block itself.

13
00:00:52,420 --> 00:00:53,990
‫Now this can be background color.

14
00:00:54,010 --> 00:01:00,070
‫This can be background image or tons of other properties that we are going to discuss now, and we can

15
00:01:00,070 --> 00:01:02,440
‫add background to text itself.

16
00:01:02,710 --> 00:01:07,360
‫So there are a lot of things with this particular topic that we need to understand.

17
00:01:08,140 --> 00:01:14,950
‫The first thing I'm going to do is one quick thing I'm going to call out there and help me out some

18
00:01:14,950 --> 00:01:18,880
‫random text, so I'm going to utilize my lawyer and see this one.

19
00:01:19,690 --> 00:01:21,730
‫So now we have our division itself.

20
00:01:22,120 --> 00:01:25,480
‫If I right click here, jump on to our inspect.

21
00:01:26,660 --> 00:01:33,800
‫You can see this is our division, and currently we haven't removed the priding as well as margin for

22
00:01:33,810 --> 00:01:40,180
‫what I need to do is let me remove writing as well as let me remove margin itself.

23
00:01:44,540 --> 00:01:47,330
‫Let me also set my box sizing as portable.

24
00:01:48,260 --> 00:01:51,020
‫So here is our current default setting.

25
00:01:51,650 --> 00:01:53,420
‫Now let us understand about background.

26
00:01:53,720 --> 00:01:59,060
‫Before that, let me also walk with our Deb because everything we are going to do will be inside this

27
00:01:59,060 --> 00:02:00,650
‫device or with our body.

28
00:02:01,220 --> 00:02:07,070
‫So by default, let me increase the if one size, I just want to increase the size of one so you can

29
00:02:07,070 --> 00:02:08,960
‫understand everything properly.

30
00:02:09,320 --> 00:02:10,790
‫Let's have this tutorial.

31
00:02:10,940 --> 00:02:14,240
‫And then also, let me add a background color for now.

32
00:02:14,660 --> 00:02:18,620
‫So this is the first background property that will help you to analyze things.

33
00:02:18,960 --> 00:02:22,340
‫I'm adding a background color, maybe as this one.

34
00:02:23,380 --> 00:02:30,640
‫And John, back here now here, you can clearly see that we selected this dip and added a background

35
00:02:30,640 --> 00:02:31,030
‫color.

36
00:02:32,080 --> 00:02:36,310
‫But let's override this, let's understand about different background properties.

37
00:02:36,520 --> 00:02:38,230
‫Let's talk about background image.

38
00:02:38,640 --> 00:02:41,830
‫Now you can see there are different other background properties, as you see.

39
00:02:42,260 --> 00:02:43,870
‫Pick the background image.

40
00:02:44,320 --> 00:02:48,750
‫Now, whenever you are going to work with background image, you have option to utilize.

41
00:02:48,760 --> 00:02:50,930
‫You want to now this.

42
00:02:50,950 --> 00:02:58,810
‫You are the X media media in the form of direct web image image that are already on source or media

43
00:02:58,840 --> 00:03:01,090
‫that are already in our devices.

44
00:03:01,120 --> 00:03:02,530
‫That means in our storage.

45
00:03:03,010 --> 00:03:09,160
‫So if I need to utilize any image, all I have to do is reach to this image from styluses.

46
00:03:09,730 --> 00:03:17,440
‫So if our style or CSF is an unmade folder, we have to move inside media and then select the background.

47
00:03:17,920 --> 00:03:22,310
‫So let me utilize media and then jump on to background.

48
00:03:22,310 --> 00:03:26,020
‫That being, I currently have two images, so I am utilizing one.

49
00:03:27,210 --> 00:03:28,380
‫And I jump back here.

50
00:03:28,500 --> 00:03:35,730
‫You can see I have added some background image, which is pretty dark, so if I jump here and if I open

51
00:03:35,730 --> 00:03:38,010
‫this back, this is our image.

52
00:03:38,640 --> 00:03:41,760
‫And if I get back here, let me also change this one color.

53
00:03:42,090 --> 00:03:44,970
‫So I'm going to utilize color and change it to white.

54
00:03:48,940 --> 00:03:53,740
‫Now here you can see our image is that our image is behind the scene.

55
00:03:57,890 --> 00:04:04,130
‫But the problem here is if you look behind the scene, it's visible, but it's not properly visible.

56
00:04:04,160 --> 00:04:10,730
‫That means we have this proper image and here if you see one part is visible and the other part is not.

57
00:04:11,390 --> 00:04:13,190
‫Now let me try to do some of stuff.

58
00:04:13,190 --> 00:04:15,710
‫Maybe let me try to customize its size.

59
00:04:15,890 --> 00:04:20,330
‫So to customize background size, we have option to utilize background size.

60
00:04:20,780 --> 00:04:27,350
‫Now this give us option, some default option auto contain as well as cover, which we are going to

61
00:04:27,350 --> 00:04:31,700
‫discuss, but we can also base our size in the form of pixels.

62
00:04:32,090 --> 00:04:40,160
‫So if I see 200 pixels and save this one in back here now you can see the images repeating itself again

63
00:04:40,160 --> 00:04:40,640
‫and again.

64
00:04:41,060 --> 00:04:44,720
‫So if you observe this is our image.

65
00:04:45,200 --> 00:04:51,380
‫Let me try to remove the text now because you have an idea and let me add weight and height to this.

66
00:04:51,710 --> 00:04:52,040
‫So.

67
00:04:53,050 --> 00:04:56,890
‫With me as high as 500 pixels.

68
00:04:59,390 --> 00:05:05,600
‫Now you can see the images repeating itself again and again, this is the first one, then it's repeating

69
00:05:05,600 --> 00:05:09,020
‫again, then it's repeating again, then it's repeating again.

70
00:05:09,650 --> 00:05:11,290
‫So that's how this is going to work.

71
00:05:11,300 --> 00:05:14,720
‫Let me utilize every research that will be much better.

72
00:05:15,530 --> 00:05:15,960
‫OK.

73
00:05:16,010 --> 00:05:17,120
‫I hope you got the idea.

74
00:05:17,150 --> 00:05:18,210
‫What is happening?

75
00:05:18,230 --> 00:05:20,330
‫The images repeating again and again.

76
00:05:20,850 --> 00:05:26,630
‫So that means there is some by default setting that force this image to repeat again and again.

77
00:05:27,050 --> 00:05:30,620
‫Also, when we utilize this size, that is background size.

78
00:05:30,980 --> 00:05:34,580
‫It helps us to define a particular fake size to our image.

79
00:05:35,180 --> 00:05:36,080
‫Let's change this.

80
00:05:36,090 --> 00:05:38,060
‫Let's remove the repetition part.

81
00:05:38,330 --> 00:05:41,030
‫So we have a property called background.

82
00:05:42,310 --> 00:05:42,820
‫Repeat.

83
00:05:43,090 --> 00:05:49,390
‫Now this has different properties like no repeat, that means we are going to see emerge only the first

84
00:05:49,390 --> 00:05:50,080
‫time itself.

85
00:05:50,230 --> 00:05:52,180
‫You see the first time only.

86
00:05:52,510 --> 00:05:53,500
‫And here we are.

87
00:05:53,500 --> 00:05:55,630
‫There has the full color this one.

88
00:05:56,590 --> 00:05:59,710
‫So are images only repeating for the first time itself.

89
00:06:00,370 --> 00:06:03,640
‫Then we have different other properties like repeat x.

90
00:06:04,300 --> 00:06:07,420
‫That means our image will repeat on the x axis.

91
00:06:07,930 --> 00:06:09,310
‫That means horizontally.

92
00:06:09,880 --> 00:06:11,350
‫Or if I say repeat y.

93
00:06:12,340 --> 00:06:15,580
‫That means our image will repeat on the y axis itself.

94
00:06:16,120 --> 00:06:20,760
‫So there are different properties that we can deal with the repeat property itself.

95
00:06:21,250 --> 00:06:26,380
‫But what I want only one time that means I want only one time only.

96
00:06:26,860 --> 00:06:33,160
‫But I want my image to cover properly, so cover everything that is visible or that we can utilize our

97
00:06:33,160 --> 00:06:34,350
‫value as cover.

98
00:06:35,050 --> 00:06:42,550
‫That means our image will cover properly, so the image will try to cover 100 percent of the available

99
00:06:42,550 --> 00:06:43,000
‫space.

100
00:06:43,180 --> 00:06:45,070
‫You'll see if I change the size.

101
00:06:45,070 --> 00:06:51,130
‫The image automatically changed its size, so image is trying to expand itself as we grow.

102
00:06:51,160 --> 00:06:56,330
‫So this is the size of body image, and if I try to expand, the image will expand itself.

103
00:06:56,980 --> 00:07:01,420
‫Now the issue is we are using 50, which if we use 100 vegetables.

104
00:07:02,690 --> 00:07:04,430
‫You will see that's how this is working.

105
00:07:06,300 --> 00:07:14,010
‫So that means the image will try to paint all the available space, so if this was her cleavage and

106
00:07:14,010 --> 00:07:18,360
‫if I try to expand here, you can see the image also expand.

107
00:07:18,570 --> 00:07:24,180
‫So that means with cover art might expand, but it will cover 100 percent of the weight.

108
00:07:24,480 --> 00:07:24,960
‫OK.

109
00:07:25,530 --> 00:07:30,540
‫Then there is another one which is contained, and this one is also important if you jump here.

110
00:07:32,050 --> 00:07:39,550
‫Now contain this tasty background image to make sure it's fully visible, so that means if I try to

111
00:07:39,550 --> 00:07:47,090
‫increase the available screen size or if I try to squeeze it, content will maintain the expense ratio

112
00:07:47,090 --> 00:07:47,680
‫of image.

113
00:07:48,070 --> 00:07:52,350
‫That means we will see our image clearly, you see.

114
00:07:52,810 --> 00:07:57,820
‫Currently, it's maintaining its height as well as where you can see everything is clear, clear, clear.

115
00:07:58,060 --> 00:08:05,320
‫As soon as we reach our point where extending this image is going to affect width and height, we can

116
00:08:05,320 --> 00:08:07,450
‫then stop stretching the image.

117
00:08:07,720 --> 00:08:09,310
‫So that's how this is going to work.

118
00:08:09,850 --> 00:08:16,630
‫So I hope you got the idea how this background size repeat as well as the image is going to work.

119
00:08:17,610 --> 00:08:22,800
‫Now, most of the time we utilized this cover, but the problem with coverage is this is not center.

120
00:08:23,340 --> 00:08:26,880
‫So with this size, you can see it's not saying, they're not saying they're not.

121
00:08:27,000 --> 00:08:32,910
‫Now this is saying that we have a clear image, but as soon as we expand on as soon as degrees outside

122
00:08:33,360 --> 00:08:34,940
‫the images, not center.

123
00:08:35,310 --> 00:08:39,000
‫So we have a new property, which is known as background position.

124
00:08:39,720 --> 00:08:46,860
‫This helps us to position our content that is position at image how we can provide additional center,

125
00:08:46,860 --> 00:08:47,220
‫maybe.

126
00:08:47,580 --> 00:08:52,260
‫So if I say this image, we're always going to remain in center, you can see.

127
00:08:53,690 --> 00:08:59,140
‫The focus is always in this, and this is the image, if you look at this again, this is the same Dabar,

128
00:08:59,510 --> 00:09:03,020
‫so an audition will always focus on this and the part you see.

129
00:09:04,610 --> 00:09:10,960
‫And it's important we most of the time utilize this setting itself, we are the image and cower and

130
00:09:10,970 --> 00:09:13,100
‫no repeat and then focus on center.

131
00:09:13,460 --> 00:09:15,740
‫Now you can change this one, you can focus on top.

132
00:09:16,130 --> 00:09:21,350
‫That means this will focus on the top of the image as I expand to about the image.

133
00:09:23,040 --> 00:09:24,960
‫If you jump back here, open the image.

134
00:09:25,050 --> 00:09:25,830
‫This is the top.

135
00:09:26,790 --> 00:09:29,250
‫Now you can change and add to settings.

136
00:09:29,280 --> 00:09:32,070
‫Maybe you want to focus towards bottom, right?

137
00:09:32,250 --> 00:09:34,050
‫So that would be this spot.

138
00:09:39,920 --> 00:09:45,770
‫No, I had if I try to increase or decrease the size, you can see this focuses on bottom right.

139
00:09:45,970 --> 00:09:50,180
‫And if I increase the size, you can again see this focus is on bottom.

140
00:09:50,870 --> 00:09:52,460
‫So that's how this is going to work.

141
00:09:53,450 --> 00:09:58,850
‫Again, you can take any other side that you want, and this is pretty important when we are working

142
00:09:58,850 --> 00:09:59,900
‫with images.

143
00:10:00,260 --> 00:10:05,780
‫Now, most of the images focuses on this indirect self, and this is the setting which you are going

144
00:10:05,780 --> 00:10:08,840
‫to utilize maybe 99 percent of the time.

145
00:10:08,990 --> 00:10:10,730
‫So I hope you got the idea.

146
00:10:11,740 --> 00:10:13,180
‫OK, this is working well.

147
00:10:14,590 --> 00:10:17,110
‫And maybe you can utilize the rich.

148
00:10:17,860 --> 00:10:23,200
‫Generally, we utilize 70, 280 while adding some content.

149
00:10:23,470 --> 00:10:24,580
‫OK, great.

150
00:10:25,700 --> 00:10:29,660
‫So that's how you are going to work with images in the basic setting.

151
00:10:29,990 --> 00:10:32,720
‫Now there are few other things that you can focus on.

152
00:10:33,170 --> 00:10:37,830
‫There is one is attachment and the other one is clip attachment.

153
00:10:37,850 --> 00:10:44,000
‫Help us to understand how our background is going to react towards the content.

154
00:10:44,450 --> 00:10:48,740
‫So first, let me add this so I can explain these content practical manner.

155
00:10:50,040 --> 00:10:54,720
‫Now here we have option about six, we have option about scrawl that inherited.

156
00:10:55,260 --> 00:10:59,490
‫So for example, if I go at fixed, I saved this one.

157
00:10:59,880 --> 00:11:04,590
‫Now, at this point of time, we don't have much content to scrawl or anything.

158
00:11:04,590 --> 00:11:10,260
‫So let me just add some random content and let me create a blue dog and just outlining.

159
00:11:11,550 --> 00:11:15,750
‫And again, let me create a dog at your door in hundred.

160
00:11:18,970 --> 00:11:24,550
‫Are to be back quite a lot in housing, save this one.

161
00:11:25,760 --> 00:11:28,240
‫That should be enough if I get back.

162
00:11:28,450 --> 00:11:33,910
‫Now you can see the image is at this point of time, fixed at exposition.

163
00:11:37,380 --> 00:11:42,750
‫You can see the images fixed, and there are chances that you will see this type of content.

164
00:11:43,140 --> 00:11:49,530
‫Let me add up the proposal and call this law and housing, save this one.

165
00:11:49,890 --> 00:11:52,650
‫And now we'll get back to our page.

166
00:11:53,160 --> 00:11:56,730
‫Now, I suppose this is the page scroll scroll here.

167
00:11:56,730 --> 00:12:01,560
‫You can see we got a section, and that's how this is going to work.

168
00:12:01,590 --> 00:12:06,840
‫The images fixed and you will see these type of effects on multiple website.

169
00:12:07,170 --> 00:12:14,310
‫If I go with maybe 30, which for now, just to demonstrate this example, you can see the images fixed.

170
00:12:16,090 --> 00:12:19,130
‫Only this action is moving top bottom.

171
00:12:19,780 --> 00:12:21,670
‫The images fixed in the background.

172
00:12:23,060 --> 00:12:25,490
‫I hope you got the idea, what we are trying to do.

173
00:12:26,510 --> 00:12:29,540
‫So this is the first one pretty common fixed.

174
00:12:29,870 --> 00:12:35,580
‫I might remove this one if I remove this, save this one and see how natural image is going to work.

175
00:12:35,600 --> 00:12:36,230
‫You can see.

176
00:12:38,060 --> 00:12:39,830
‫Naturally, it's just crawling.

177
00:12:40,850 --> 00:12:42,080
‫That's how it is going to work.

178
00:12:42,500 --> 00:12:48,860
‫So fix means that image will stick behind the scene and we will move our big bill move.

179
00:12:49,460 --> 00:12:51,020
‫So that was about fixed.

180
00:12:51,890 --> 00:12:56,770
‫Now the fourth one is called that you recently saw this is crime.

181
00:12:57,110 --> 00:13:00,350
‫That means are images crawling according to our movement?

182
00:13:00,800 --> 00:13:01,220
‫That's it.

183
00:13:01,760 --> 00:13:02,870
‫So this is scroll.

184
00:13:06,090 --> 00:13:08,310
‫So that said, this is about the attachment.

185
00:13:08,340 --> 00:13:14,910
‫Now there is one important one, which is known as background clip and that we are discussing the next

186
00:13:14,910 --> 00:13:22,020
‫lecture because background clip not only connect with the background, but can also change the way we

187
00:13:22,020 --> 00:13:23,340
‫understand about text.

188
00:13:23,760 --> 00:13:29,100
‫So in the next lecture, let me clear this up and understand about background clip.

189
00:13:29,730 --> 00:13:31,350
‫I hope this lecture was helpful.

190
00:13:31,380 --> 00:13:34,140
‫Thank you for calling, and I see you guys in the next one.