1 00:00:00,710 --> 00:00:02,570 Hello, everyone, and welcome back. 2 00:00:03,230 --> 00:00:07,500 In today's video, we will learn how to add background to our demon elements. 3 00:00:08,180 --> 00:00:09,830 We can fill the background with a color. 4 00:00:10,640 --> 00:00:12,520 We can use images as a background. 5 00:00:13,070 --> 00:00:15,060 And we can use gradient as a backdrop. 6 00:00:15,740 --> 00:00:17,720 We already know how to like color as a background. 7 00:00:17,750 --> 00:00:21,020 So let's try to we can say this is the Web page that we have. 8 00:00:21,860 --> 00:00:23,240 Let's go the background color. 9 00:00:23,930 --> 00:00:25,490 Let's bring about goodies to here. 10 00:00:27,650 --> 00:00:30,300 So let's try giving about don't go to this head of. 11 00:00:31,870 --> 00:00:35,690 So this is the head of elementally already given it some states. 12 00:00:35,740 --> 00:00:37,480 So let's give it a background color. 13 00:00:39,000 --> 00:00:42,100 Let's say cash in on you five five. 14 00:00:42,790 --> 00:00:43,410 Let's save it. 15 00:00:44,250 --> 00:00:47,370 And as you can see of a page, has a light blue background color. 16 00:00:47,880 --> 00:00:52,260 Now, let's see, you want to add a bathroom image to it to specify a bathroom. 17 00:00:52,270 --> 00:00:55,600 That's an image we can use the bathroom image property. 18 00:00:56,070 --> 00:00:56,850 So let's try that. 19 00:00:59,230 --> 00:01:05,490 So let's use about our eMESH property, so to use about our image, we need an image first. 20 00:01:05,490 --> 00:01:07,180 So I've got some image here. 21 00:01:07,870 --> 00:01:10,550 So let's try this one. 22 00:01:13,510 --> 00:01:14,380 Coming back here. 23 00:01:15,590 --> 00:01:18,360 I'm disgusted by an image we use this. 24 00:01:18,420 --> 00:01:22,800 You are better and we busser mission you let's save it. 25 00:01:23,670 --> 00:01:26,100 And as you can see, you've got this image in the background. 26 00:01:26,650 --> 00:01:29,070 So if I had been there, it's here. 27 00:01:29,460 --> 00:01:30,840 So this is how the images. 28 00:01:31,440 --> 00:01:35,520 But by default, it is being repeated to fill all the available space. 29 00:01:36,790 --> 00:01:38,260 Let's say we don't want to repeat it. 30 00:01:38,770 --> 00:01:41,890 For that, we can use the proper medical background to beat. 31 00:01:43,010 --> 00:01:45,020 So let's add that here. 32 00:01:46,310 --> 00:01:50,880 So background JBC, let's see, no, repeat the table. 33 00:01:51,440 --> 00:01:56,420 And as you can see here, no, we can see only one in which it's not being depleted. 34 00:01:57,320 --> 00:02:00,320 Let's stretching in the background image dimensions for that. 35 00:02:00,350 --> 00:02:03,330 We have another property called background sites. 36 00:02:04,280 --> 00:02:05,130 So let's try that. 37 00:02:07,060 --> 00:02:11,240 It except Stewart is a whip and height separated by space. 38 00:02:11,360 --> 00:02:15,680 Let's say 200 pixels by 200 pixels the table. 39 00:02:16,400 --> 00:02:19,310 And as you can see, the image becomes became smaller. 40 00:02:20,150 --> 00:02:21,270 Let's try giving it a value. 41 00:02:21,320 --> 00:02:22,710 Bigger than this div. 42 00:02:23,420 --> 00:02:26,030 So the height of Devore's to 120 pixels. 43 00:02:26,750 --> 00:02:28,130 Let's try using Aboutaleb safety. 44 00:02:28,180 --> 00:02:30,320 Turn the pixels back into more pixels. 45 00:02:31,690 --> 00:02:32,240 It's Eamon. 46 00:02:33,530 --> 00:02:38,000 And as you can see, the image has been cropped and it did not make the division scrollable. 47 00:02:38,990 --> 00:02:43,130 This is because the image is a background and not the content. 48 00:02:43,760 --> 00:02:45,440 Let's bring it back to original size. 49 00:02:45,500 --> 00:02:47,000 So let's just move this. 50 00:02:47,420 --> 00:02:49,280 Let's hear it right now. 51 00:02:49,550 --> 00:02:51,830 This background image is in the top left corner. 52 00:02:52,430 --> 00:02:53,750 Let's try and bring it around. 53 00:02:55,330 --> 00:02:59,850 So so for that, we have another property going back on position. 54 00:03:01,580 --> 00:03:03,590 So here we can give you a sea dog. 55 00:03:04,020 --> 00:03:04,740 Let's save it. 56 00:03:05,540 --> 00:03:09,430 As you can see it move to the center of the screen, horizontal at the top. 57 00:03:10,110 --> 00:03:11,990 Then you've got left. 58 00:03:13,050 --> 00:03:16,560 Let's say that, as you can see, it's in the center of the screen. 59 00:03:16,690 --> 00:03:17,890 But on the left hand side. 60 00:03:19,480 --> 00:03:21,380 Similarly, let's try the water. 61 00:03:22,040 --> 00:03:23,590 Let's have it again. 62 00:03:23,740 --> 00:03:25,010 It's in the center of the screen. 63 00:03:25,210 --> 00:03:26,290 But at the bottom. 64 00:03:27,850 --> 00:03:28,790 Simultaneous, right? 65 00:03:29,080 --> 00:03:29,630 Right. 66 00:03:30,670 --> 00:03:32,140 It does now on the right hand side. 67 00:03:32,710 --> 00:03:40,060 And then we've got another rally call center now, as you can see the images in the center of the division. 68 00:03:40,630 --> 00:03:45,310 Now, if we want to move it around, say, to the top left corner, we could use a combination of these 69 00:03:45,310 --> 00:03:48,070 values so we could do. 70 00:03:48,110 --> 00:03:49,480 Top left table. 71 00:03:50,230 --> 00:03:53,170 Similarly, the TV wanted in the bottom right. 72 00:03:53,260 --> 00:03:55,060 So we could do something like this. 73 00:03:55,810 --> 00:03:56,990 So bottom line. 74 00:03:57,250 --> 00:03:57,700 Right. 75 00:03:58,820 --> 00:03:59,120 Taylor. 76 00:03:59,600 --> 00:04:03,300 And now, as you can see, it is on the bottom right corner of the division. 77 00:04:04,140 --> 00:04:06,680 Now, say you want this image to be a full screen background. 78 00:04:07,950 --> 00:04:11,890 So for that, the background size property, except two more values. 79 00:04:13,290 --> 00:04:14,520 Contain and go. 80 00:04:14,740 --> 00:04:15,660 So let's try these. 81 00:04:18,730 --> 00:04:24,860 Let's remove this, let's Abdul back on sites, property and let's say contain. 82 00:04:25,360 --> 00:04:25,990 Let's leave it. 83 00:04:27,530 --> 00:04:31,640 And as you can see, it's taking the entire height, but not the width of the division. 84 00:04:32,780 --> 00:04:37,790 This is happening because the images zoomed to fill the space without dropping any part of the image. 85 00:04:38,060 --> 00:04:40,460 So that's what this finding does. 86 00:04:41,540 --> 00:04:44,950 Now, let's try the other Oliver Twist cover. 87 00:04:45,650 --> 00:04:46,180 Let's save it. 88 00:04:47,390 --> 00:04:49,140 Now, as you can see, the images zoomed through. 89 00:04:49,220 --> 00:04:53,960 All this piece of this image looks a bit grainy because it is of a military solution. 90 00:04:53,990 --> 00:04:54,380 That's right. 91 00:04:54,380 --> 00:04:56,510 Using image with a higher resolution. 92 00:04:57,350 --> 00:04:59,050 So we've got another image here. 93 00:05:03,350 --> 00:05:08,860 Let's replace this filing, so in sort of this one that speaks to me running the table. 94 00:05:09,710 --> 00:05:11,270 And this looks much better. 95 00:05:12,350 --> 00:05:13,430 That's all for today, guys. 96 00:05:13,550 --> 00:05:15,590 If there's something that you did not understand. 97 00:05:15,800 --> 00:05:18,380 Feel free to drop a comment and we will discuss it. 98 00:05:19,070 --> 00:05:20,070 See you in the next video. 99 00:05:20,270 --> 00:05:20,620 Bye. 100 00:05:20,810 --> 00:05:21,310 And Dick.