WEBVTT 00:00:07.020 --> 00:00:13.590 I trust you've done your best to follow all the steps and I hope that you manage to finish everything 00:00:13.950 --> 00:00:17.570 and you manage to build something similar to our final website. 00:00:18.030 --> 00:00:20.350 So now we're going to go through this together. 00:00:20.850 --> 00:00:28.550 So first of all we're going to go to our styling file and we will set the background of our Web sites 00:00:28.550 --> 00:00:29.420 . 00:00:29.910 --> 00:00:34.920 So to do that we are going to style the body element of our page. 00:00:35.780 --> 00:00:36.160 OK. 00:00:36.180 --> 00:00:42.670 And we'll use the background property as we've done in the previous projects. 00:00:42.970 --> 00:00:43.720 OK. 00:00:43.890 --> 00:00:47.870 So we need to get a nice picture like this. 00:00:47.880 --> 00:00:55.060 So again we're going to go to the free nature stock website. 00:00:55.980 --> 00:00:58.910 OK. 00:00:59.580 --> 00:01:03.980 So you can get any picture you want from there. 00:01:05.910 --> 00:01:10.550 And to use it you can just copy the Arielle from there. 00:01:11.030 --> 00:01:11.710 OK. 00:01:11.880 --> 00:01:14.150 So the one I'm using has. 00:01:14.190 --> 00:01:15.750 And number there. 00:01:16.050 --> 00:01:18.400 Two hundred thirty two. 00:01:19.670 --> 00:01:21.070 And that's that's the one I'm using. 00:01:21.240 --> 00:01:21.740 OK. 00:01:22.230 --> 00:01:24.040 So if I copy that you are real 00:01:27.690 --> 00:01:30.390 and then places inside the 00:01:33.070 --> 00:01:39.700 real promiser of the background property then that's what we get. 00:01:40.120 --> 00:01:40.720 OK. 00:01:40.800 --> 00:01:48.800 So at the moment our picture is not scaled so we need to use the background Size property. 00:01:50.510 --> 00:01:51.380 OK. 00:01:52.030 --> 00:01:56.110 I would say that to cover as we did in our previous products. 00:01:56.130 --> 00:01:56.820 OK. 00:01:57.330 --> 00:02:06.380 So now we can see our background image OK but it's not centered like the final page. 00:02:06.930 --> 00:02:13.860 And the reason why is because by default the background image will start at the top left points of our 00:02:13.890 --> 00:02:15.030 HMO elements. 00:02:15.180 --> 00:02:22.560 In our case the body elements if we have a quick look at the original picture we can see that the width 00:02:22.620 --> 00:02:26.860 of the picture is smaller than the width of our screen. 00:02:27.120 --> 00:02:33.750 So when we apply background size cover our picture the width of the picture is going to stretch to fit 00:02:33.750 --> 00:02:35.960 the width of our screen. 00:02:36.240 --> 00:02:41.760 And since we're going to be keeping the same aspect ratio then the height is going to stretch as well 00:02:41.770 --> 00:02:42.320 . 00:02:42.990 --> 00:02:49.310 And consequently it's going to be cropped other most and that's what we've seen here. 00:02:50.210 --> 00:02:50.560 OK. 00:02:50.580 --> 00:02:54.240 So we can see all that BOD's cropped that. 00:02:54.590 --> 00:02:55.350 OK. 00:02:55.350 --> 00:03:03.210 So to fix this we're going to need to censor our image horizontally and vertically so horizontally our 00:03:03.240 --> 00:03:04.680 picture is fine. 00:03:04.680 --> 00:03:12.480 Thanks to the background size cover but vertically we will need to push the picture slightly up so that 00:03:12.480 --> 00:03:15.410 we can crop a little bit from there. 00:03:15.780 --> 00:03:16.350 OK. 00:03:16.520 --> 00:03:25.500 And if we push the picture up then a fraction of the cropped part at the bottom is going to show up 00:03:25.500 --> 00:03:25.880 . 00:03:25.980 --> 00:03:26.740 OK. 00:03:26.910 --> 00:03:34.700 So to do this we're going to go back to our Baghran property and two bodies. 00:03:34.700 --> 00:03:40.710 This one is for the horizontal centering on the second one is for the vertical centering. 00:03:40.890 --> 00:03:42.000 OK. 00:03:42.000 --> 00:03:44.750 So he says centering the picture horizontally and vertically. 00:03:45.270 --> 00:03:48.390 By default that's was top left. 00:03:48.400 --> 00:03:51.490 OK so now let's have a look. 00:03:52.410 --> 00:03:52.960 OK. 00:03:53.220 --> 00:03:55.580 Now of course another issue. 00:03:55.590 --> 00:03:58.100 Other moments the body is empty. 00:03:58.770 --> 00:03:59.580 OK. 00:04:00.060 --> 00:04:08.160 And that's the reason why the height of our picture is too small and consequently we still have more 00:04:08.160 --> 00:04:10.350 space in our screen. 00:04:10.350 --> 00:04:10.720 OK. 00:04:10.740 --> 00:04:14.020 And that's the start of the next picture. 00:04:14.020 --> 00:04:16.680 So actually the picture is repeating itself. 00:04:17.000 --> 00:04:18.390 OK. 00:04:18.600 --> 00:04:25.100 And the fraction you see there is exactly this. 00:04:25.110 --> 00:04:29.020 OK which is the beginning of the picture repeating itself. 00:04:29.070 --> 00:04:39.930 So to fix this we're going to add another value to the background property which is no repeats. 00:04:40.650 --> 00:04:44.490 And then we can go in and see that the picture is not going to reveal itself. 00:04:44.940 --> 00:04:46.350 OK. 00:04:46.860 --> 00:04:53.270 Now if we feel our body element then this picture is going to be to become bigger. 00:04:53.400 --> 00:04:54.330 OK. 00:04:54.330 --> 00:05:04.120 But we can fix that even before filling the body elements by fixing our background image. 00:05:04.420 --> 00:05:11.020 And if you remember we say that in the final Web sites when we scroll down the image doesn't move. 00:05:11.260 --> 00:05:12.300 OK. 00:05:12.330 --> 00:05:23.530 So to do that we're going to add another value to our background property which is fixed. 00:05:23.520 --> 00:05:31.310 There's another way of doing this we can add another property called background attachments 00:05:34.860 --> 00:05:38.780 and we can send that to fixed is the same. 00:05:39.220 --> 00:05:39.710 OK. 00:05:39.950 --> 00:05:40.710 And now 00:05:46.710 --> 00:05:53.020 we can see that our background picture is covering the whole screen. 00:05:53.460 --> 00:05:54.830 OK. 00:05:56.630 --> 00:05:57.100 OK. 00:05:57.120 --> 00:06:05.130 Now before moving on we are going to on the font family to the body elements which will be applied to 00:06:05.130 --> 00:06:06.670 the whole web page. 00:06:06.750 --> 00:06:11.770 So we're going to use the phones family property and I'm using RVO. 00:06:12.000 --> 00:06:12.610 OK. 00:06:12.870 --> 00:06:15.050 And as a fallback we're going to go for. 00:06:15.130 --> 00:06:16.500 Sorry. 00:06:17.430 --> 00:06:22.370 All right.