WEBVTT FILE





1
00:00:06.620 --> 00:00:12.300
in this video we're going to learn how to set background images first of all

2
00:00:12.300 --> 00:00:20.220
we're gonna go to our HTML project folder and copy the image folder from

3
00:00:20.220 --> 00:00:35.100
there to the CSS folder okay so now we're gonna set a background image to

4
00:00:35.100 --> 00:00:40.110
the Facebook div but first of all is change a little bit the dimensions let's

5
00:00:40.110 --> 00:00:47.760
set the height 200 pixels okay that looks good now rather than having a

6
00:00:47.760 --> 00:00:55.610
background color we want a background image so the syntax is pretty easy

7
00:00:55.610 --> 00:01:03.149
background image and now we're gonna refer to the location of the image using

8
00:01:03.149 --> 00:01:12.270
the URL property and we're gonna go to images and we want to choose picture

9
00:01:12.270 --> 00:01:18.659
don't stay back okay now we can see that's the background or

10
00:01:18.659 --> 00:01:27.330
Facebook has got the picture we selected the problem is the dimensions are not

11
00:01:27.330 --> 00:01:32.850
very good for us so now we want to scale the image so that it fits exactly the

12
00:01:32.850 --> 00:01:44.790
Facebook div so one way of doing that is by using the background size and now

13
00:01:44.790 --> 00:01:49.680
we're gonna set the width and the height using percentage percentages so if we

14
00:01:49.680 --> 00:01:54.960
set the width to hundred percent then the height to hundred percent so that

15
00:01:54.960 --> 00:02:01.380
means that's the picture new size is gonna fit exactly the size of the div

16
00:02:01.380 --> 00:02:09.599
okay if we set that to 50 50 percents and fifty percent we can see that the

17
00:02:09.599 --> 00:02:17.069
size of the image is actually 1/4 of the overall size of the dev and it's

18
00:02:17.069 --> 00:02:24.540
repeated four times if we don't want the image to be repeated and there is

19
00:02:24.540 --> 00:02:32.189
another property it's the background repeat and we can send that to no

20
00:02:32.189 --> 00:02:37.319
repeats so there are other options that you can choose repeat X repeats Y

21
00:02:37.319 --> 00:02:42.510
etcetera but if we choose no repeats then the picture is not going to be

22
00:02:42.510 --> 00:02:56.540
repeated okay all right so let's go back to 100% 100% okay that looks good now

23
00:02:56.540 --> 00:03:09.599
there is another property is the background origin so let's try that so

24
00:03:09.599 --> 00:03:16.169
there are several choices that the defaults choice is that's the image has

25
00:03:16.169 --> 00:03:21.900
cost an origin starting from the border box which is our case now so the border

26
00:03:21.900 --> 00:03:26.190
so the border is there so if we if the image starts from there you can see it

27
00:03:26.190 --> 00:03:31.260
as we are seeing it now if the image starts from from the contents box which

28
00:03:31.260 --> 00:03:35.040
is the paragraph the Facebook paragraph then the image is going to start from

29
00:03:35.040 --> 00:03:42.359
here let's try that so if we set it to content box now the image starts from

30
00:03:42.359 --> 00:03:51.470
there okay and all the dimensions are going to be related to the dimensions of

31
00:03:51.470 --> 00:04:01.739
the content box okay okay now let's move to the Apple div and do the same thing

32
00:04:01.739 --> 00:04:06.689
so we're gonna choose a background image rather than a background color so

33
00:04:06.689 --> 00:04:23.099
background image and I'm gonna select the locations or the image okay first

34
00:04:23.099 --> 00:04:31.289
let's change the height as well 200 pixels and now let's set the background

35
00:04:31.289 --> 00:04:40.800
size this time rather than using the percentage we're gonna choose an actual

36
00:04:40.800 --> 00:04:53.460
size so let's go for 100 pixels by hundred pixels so you can see that's the

37
00:04:53.460 --> 00:04:58.919
image takes exactly size of her pixels by hundred pixels if we want the image

38
00:04:58.919 --> 00:05:12.500
to not repeat I'm just gonna go again background-repeat:no-repeat okay and now

39
00:05:12.500 --> 00:05:25.139
okay let's try again the background origin so if we go for Porter box this

40
00:05:25.139 --> 00:05:29.430
time let me change anything because that's by default the image origin is

41
00:05:29.430 --> 00:05:36.029
the border box now we're gonna try something new we're gonna set the

42
00:05:36.029 --> 00:05:44.779
position of the image so to do that we're gonna use the background position

43
00:05:45.560 --> 00:05:51.510
there are several choices there so the position is gonna tell where the image

44
00:05:51.510 --> 00:05:59.070
is gonna go so is he gonna go to the left right top bottom or Center positive

45
00:05:59.070 --> 00:06:05.699
okay so if we choose for instance the top of the div so you can see that's the

46
00:06:05.699 --> 00:06:12.560
image well first of all the origin is the border box and it's gonna be

47
00:06:12.560 --> 00:06:21.210
centered at the top if we choose bottom there's going to be a sunset at the

48
00:06:21.210 --> 00:06:31.060
bottom and so on okay and now if we go back to left so it's

49
00:06:31.060 --> 00:06:39.310
going to be censored ads the left okay and we can play with the dimensions of

50
00:06:39.310 --> 00:06:46.810
the image if we want to for instance have an image right on the left of the

51
00:06:46.810 --> 00:07:02.050
Apple text so if we forget about the background position and we change the

52
00:07:02.050 --> 00:07:12.010
background size to 50 point 50 pixels for example you can play with that so

53
00:07:12.010 --> 00:07:17.620
that we can have the image right next to the text and we will see a little bit

54
00:07:17.620 --> 00:07:27.840
little bit more how to use this way of doing when we're doing projects okay