1
00:00:00,550 --> 00:00:01,120
‫Hey, there.

2
00:00:01,270 --> 00:00:02,020
‫Welcome back.

3
00:00:02,380 --> 00:00:07,180
‫Now we need to add background with our section, which is our banner section.

4
00:00:07,780 --> 00:00:12,970
‫So what we are going to do is we are going to have some similar background for this section.

5
00:00:13,870 --> 00:00:17,320
‫The first thing I need to do is I need to discuss about the images.

6
00:00:18,190 --> 00:00:24,910
‫So there are currently three images with our background may not mean that established and then mean

7
00:00:24,910 --> 00:00:25,720
‫that mobile.

8
00:00:26,110 --> 00:00:27,520
‫Why these three images?

9
00:00:28,180 --> 00:00:34,570
‫The reason is whenever we are working with our responsive website, chances are these backgrounds are

10
00:00:34,570 --> 00:00:39,790
‫going to overlap with our content when we try to decrease or increase the size.

11
00:00:40,180 --> 00:00:43,080
‫So if I just right click here, what to inspect.

12
00:00:43,990 --> 00:00:46,420
‫And if I try to decrease or increase the size.

13
00:00:48,500 --> 00:00:54,830
‫You can see the images changing with different sizes here, where the Maxwell talk one two seven nine,

14
00:00:54,830 --> 00:00:56,090
‫that is a different image.

15
00:00:56,600 --> 00:00:59,810
‫And with the photo depiction, there is a different image.

16
00:01:00,320 --> 00:01:02,430
‫So that's how this is going to work.

17
00:01:03,260 --> 00:01:09,260
‫Now, this is important because most of the big website, although some similar pattern with different

18
00:01:09,260 --> 00:01:15,530
‫websites, says they have different background image just to avoid overlapping of this content as well

19
00:01:15,530 --> 00:01:16,410
‫as this background.

20
00:01:17,240 --> 00:01:19,340
‫We are going to follow something similar.

21
00:01:19,970 --> 00:01:26,270
‫It may get back here and add a background image a quick disclaimer.

22
00:01:26,480 --> 00:01:32,900
‫We have an entire section about backgrounds later in this course are currently I'm going to discuss

23
00:01:32,900 --> 00:01:37,280
‫the basics of background image so we can utilize them in our project.

24
00:01:38,000 --> 00:01:38,630
‫Don't worry.

25
00:01:38,990 --> 00:01:40,490
‫Just understand the basic.

26
00:01:40,490 --> 00:01:44,480
‫Right now we have a section about background Slater.

27
00:01:44,510 --> 00:01:46,580
‫You will understand about everything in.

28
00:01:47,910 --> 00:01:50,850
‫The first thing I need to do is simply add background image.

29
00:01:52,320 --> 00:01:57,660
‫And here, since we are utilizing our image, but so we need to use, you are in.

30
00:01:58,670 --> 00:02:05,300
‫Now this, you are told, can have image or directly from the Web or if we have our own image somewhere

31
00:02:05,300 --> 00:02:07,520
‫saved in our system, we need to pass.

32
00:02:08,720 --> 00:02:10,460
‫Remember one important point?

33
00:02:10,780 --> 00:02:13,730
‫Both depart from your style, Garcia says.

34
00:02:13,880 --> 00:02:23,510
‫For example, had my style, CSIS is in some part in some folder, and I need to reach to my background

35
00:02:23,510 --> 00:02:23,840
‫image.

36
00:02:24,170 --> 00:02:30,410
‫So from Styler CSIS, I need to jump on to my media, my Viji and then mean, not sweetie.

37
00:02:31,010 --> 00:02:32,820
‫So that means I need to follow up.

38
00:02:32,820 --> 00:02:39,260
‫But then I've done since that your style or is in a different folder, then you have to define part

39
00:02:39,260 --> 00:02:39,950
‫differently.

40
00:02:41,040 --> 00:02:48,100
‫For now, let us jump on to the media part and then and then may not be if I saved this one.

41
00:02:48,120 --> 00:02:49,020
‫Get back here.

42
00:02:50,250 --> 00:02:54,840
‫OK, we have this image, but that image size is going to trouble us.

43
00:02:55,910 --> 00:02:59,450
‫Okay, let me jump here on the image size.

44
00:02:59,570 --> 00:03:01,610
‫So I like this background.

45
00:03:02,630 --> 00:03:06,750
‫And had I need to select payment sites now, I can utilize the account.

46
00:03:07,130 --> 00:03:11,750
‫That means that we covered the whole section, whole banner section.

47
00:03:12,560 --> 00:03:13,400
‫Get back here.

48
00:03:13,400 --> 00:03:15,170
‫You can see the images here.

49
00:03:16,250 --> 00:03:19,920
‫But I don't want this, I want something that I want to stretch out here.

50
00:03:19,940 --> 00:03:20,690
‫Stretch it out.

51
00:03:20,690 --> 00:03:22,520
‫Basically, I want to increase that size.

52
00:03:23,270 --> 00:03:29,360
‫So what I can do is instead of using power, I can discover is basically 100 percent.

53
00:03:29,840 --> 00:03:35,090
‫So that means the image sizes 100 percent or whatever the parent is, which is our section.

54
00:03:35,690 --> 00:03:39,050
‫What I can do here is I can increase this image size.

55
00:03:39,110 --> 00:03:41,180
‫Maybe I can take 110 pics.

56
00:03:42,410 --> 00:03:43,580
‫You see, it's increasing.

57
00:03:44,960 --> 00:03:47,300
‫Maybe 150 here saved.

58
00:03:50,010 --> 00:03:52,550
‫It's too big now it's here and there now.

59
00:03:53,760 --> 00:03:56,280
‫Maybe 170, if I save this one.

60
00:03:56,970 --> 00:03:58,560
‫You can say it's increasing.

61
00:03:58,650 --> 00:04:02,430
‫And the problem here is the position is not fixed.

62
00:04:02,730 --> 00:04:09,300
‫So are images starting from here, it's increasing and it's increasing on the right site.

63
00:04:09,870 --> 00:04:14,400
‫What I can do is I can move my image here and there, so I can move this image here.

64
00:04:14,670 --> 00:04:15,630
‫This whole image?

65
00:04:16,020 --> 00:04:17,400
‫Let me right click here.

66
00:04:19,840 --> 00:04:26,470
‫Select my image, this is my image, and I can move this image on the left side or on the right side,

67
00:04:27,370 --> 00:04:34,450
‫so basically I can change position so that given the property name will be background position.

68
00:04:35,890 --> 00:04:41,050
‫Now, this background position takes two arguments on, I should say, value, the first value will

69
00:04:41,050 --> 00:04:43,990
‫be about the horizontal axis, which is the x axis.

70
00:04:44,620 --> 00:04:46,840
‫The second value will be the vertical axis.

71
00:04:47,170 --> 00:04:54,460
‫So if I say I want to move it to 46 percent horizontally and four percent vertically, save this one.

72
00:04:55,730 --> 00:04:57,140
‫You can see it move now.

73
00:04:58,660 --> 00:05:04,110
‫Now here, if I try to select this value, if I try to increase it, you can see I increase this value.

74
00:05:04,120 --> 00:05:05,170
‫This is moving here.

75
00:05:05,260 --> 00:05:07,810
‫If I decrease this value of this is moving out.

76
00:05:10,000 --> 00:05:12,040
‫So that's this value, OK?

77
00:05:12,610 --> 00:05:19,750
‫So let me change this background sites to maybe one 75 percent if I say one percent.

78
00:05:21,090 --> 00:05:25,950
‫You can see this looks pretty hard wired because this is one single image.

79
00:05:27,150 --> 00:05:30,670
‫And then it repeats itself multiple times, multiple times.

80
00:05:31,080 --> 00:05:34,530
‫We can add a value of no repeat and that will restrict that.

81
00:05:35,190 --> 00:05:41,340
‫So basically what we can do here is the property background repeat.

82
00:05:41,430 --> 00:05:42,940
‫By default, it repeat.

83
00:05:43,770 --> 00:05:45,420
‫So I can see no repeat.

84
00:05:45,820 --> 00:05:46,680
‫Save this one.

85
00:05:46,800 --> 00:05:47,610
‫Get back here.

86
00:05:48,370 --> 00:05:51,300
‫Now I try to ah, to change the size.

87
00:05:52,880 --> 00:05:57,500
‫170, let me take you 10 percent, you can see this is the image.

88
00:05:59,320 --> 00:06:02,530
‫I say 50, you can see this is the image.

89
00:06:05,520 --> 00:06:08,550
‫Here I see 170 nights here.

90
00:06:09,090 --> 00:06:14,280
‫We can change the background position as well as not just horizontally but vertically.

91
00:06:14,280 --> 00:06:19,680
‫Also, we can increase the percentage that will move up, decrease the percentage it will move down,

92
00:06:20,250 --> 00:06:25,770
‫increase the percentage it's moving towards the left side, decrease the percentage, it's moving towards

93
00:06:25,770 --> 00:06:26,580
‫the right side.

94
00:06:27,360 --> 00:06:32,690
‫Now that a lot of hit and miss with these values because you are not going to get these values in the

95
00:06:32,700 --> 00:06:32,990
‫first.

96
00:06:33,390 --> 00:06:39,840
‫To be honest, I got this value after two or three or four trials, so it totally depends how you try

97
00:06:39,840 --> 00:06:40,200
‫this.

98
00:06:40,950 --> 00:06:42,670
‫Now, if I refresh, OK?

99
00:06:43,960 --> 00:06:45,640
‫That's looks pretty awesome.

100
00:06:46,210 --> 00:06:52,840
‫So I hope you got the idea about how background image work are image, if you're using any type of gradient,

101
00:06:53,110 --> 00:06:58,660
‫then we need to provide some size because at this point of time, images, including some width and

102
00:06:58,660 --> 00:06:58,990
‫height.

103
00:06:59,320 --> 00:07:05,260
‫But if I had any type of gradient color that includes zero height, so we need to add some height and

104
00:07:05,290 --> 00:07:08,590
‫we can change the height of our current image using background size.

105
00:07:09,130 --> 00:07:16,390
‫We can also change the position using background position and also change its default value from repeat

106
00:07:16,390 --> 00:07:17,170
‫to not repeat.

107
00:07:18,040 --> 00:07:22,540
‫That said, that's the basic aim of this picture to understand about this point.

108
00:07:23,260 --> 00:07:27,640
‫Now, in future, we will move towards responsive Parc Y because of price.

109
00:07:27,790 --> 00:07:36,700
‫If you'll see right now, if I try to do some type of juggling between tablet, mobile and full screen,

110
00:07:37,240 --> 00:07:41,350
‫you will see this background images creating tons of overlapping.

111
00:07:41,380 --> 00:07:43,000
‫This is a problem here.

112
00:07:43,510 --> 00:07:50,950
‫So what we can do is we can simply change the image and altered size and position, and that is why

113
00:07:50,950 --> 00:07:53,170
‫we have these three images.

114
00:07:54,580 --> 00:07:56,110
‫I hope you got the idea.

115
00:07:56,500 --> 00:08:04,240
‫So that's it for this lecture, I hope this section is ready for now and we are going to go towards

116
00:08:04,240 --> 00:08:05,140
‫date for that part.

117
00:08:06,100 --> 00:08:07,110
‫That's all for this one.

118
00:08:07,210 --> 00:08:08,240
‫Thank you for calling.

119
00:08:08,260 --> 00:08:10,150
‫And I see you guys in the next one.