0 1 00:00:02,720 --> 00:00:07,190 In this video, we're going to build a small part of the hero section. Only the background image. And 1 2 00:00:07,190 --> 00:00:11,600 to do so we're going to learn a concept that we haven't touched yet in depth. 2 3 00:00:11,600 --> 00:00:17,270 The background styles. To start with let's create a new project. Webflow's free plan only allows 2 3 4 00:00:17,270 --> 00:00:18,740 unhosted projects. 4 5 00:00:18,740 --> 00:00:23,810 And if you already reached your limit, which you probably did. You can delete one of those previous projects. 5 6 00:00:23,840 --> 00:00:25,070 Preferably the first one, 6 7 00:00:25,100 --> 00:00:29,630 the simple one. Because the ChatApp project we might actually use it in one of the future videos. 7 8 00:00:39,130 --> 00:00:39,460 Okay. 8 9 00:00:39,490 --> 00:00:42,580 We're gonna name these Team App and choose a black template. 9 10 00:00:45,780 --> 00:00:53,870 As usual, we start with a box. Which is a div block. We've already used background styles to set a solid 10 11 00:00:53,900 --> 00:00:56,230 color background fill to our div blocks. 11 12 00:00:56,270 --> 00:01:01,260 But that's only one small part of what we can do with background styles. Just like Figma 12 13 00:01:01,260 --> 00:01:06,220 we can also give gradient background fills, image fills and color overlays. 13 14 00:01:06,290 --> 00:01:13,150 All that is accessible by clicking this plus icon, under backgrounds. First is the background image, 14 15 00:01:13,150 --> 00:01:15,650 that's what we're going to be using in this case. 15 16 00:01:15,700 --> 00:01:17,270 We'll come back to this later. 16 17 00:01:17,380 --> 00:01:23,890 The next, we have linear gradient, which works in a similar way like Figma's gradient. To change the start 17 18 00:01:23,890 --> 00:01:26,020 and end colors, double click on these markers. 18 19 00:01:32,720 --> 00:01:35,390 You can set the angle of the gradient too. In Figma, 19 20 00:01:35,390 --> 00:01:40,310 we use this stick, that can be manually moved around, but here we have to set the angle 20 21 00:01:40,310 --> 00:01:41,570 by turning this dial. 21 22 00:01:45,710 --> 00:01:53,210 Or just clicking this rotation controls, or putting the exact degree in this field. The next we have 22 23 00:01:53,210 --> 00:01:54,230 Radial gradient. 23 24 00:01:58,660 --> 00:01:59,310 In Figma, 24 25 00:01:59,320 --> 00:02:05,080 We are able to move the position manually by dragging the handle of the stick. But in Webflow we can 25 26 00:02:05,080 --> 00:02:07,410 do that by changing the position on this map. 26 27 00:02:10,930 --> 00:02:14,230 In a similar way, we can change size of the gradient from these buttons. 27 28 00:02:14,260 --> 00:02:17,140 They have explanation on how size is determined, but who cares. 28 29 00:02:17,140 --> 00:02:19,540 Just switch them around to see what works for you. 29 30 00:02:20,740 --> 00:02:22,480 The last option is color overlay. 30 31 00:02:22,480 --> 00:02:28,690 This is mainly used to put a semi-transparent color on top of images. Like what we did in Figma, but instead 31 32 00:02:28,690 --> 00:02:33,940 of a gradient just a solid fill. For this to work we have to add an image as an extra layer and place 32 33 00:02:33,940 --> 00:02:35,230 it underneath the overlay. 33 34 00:02:48,570 --> 00:02:52,110 It works just like you would expect. Hide/show, drag them around, delete. 34 35 00:02:59,180 --> 00:02:59,440 All right. 35 36 00:02:59,450 --> 00:03:02,590 In our case, we need to add a background image. 36 37 00:03:02,660 --> 00:03:06,240 We need to export the image from our Figma file and then upload it here. 37 38 00:03:08,660 --> 00:03:12,680 I'm not going to optimize it just yet, because you'll see that we're gonna need to do something else 38 39 00:03:12,680 --> 00:03:13,580 with the image first. 39 40 00:03:24,400 --> 00:03:25,020 By default, 40 41 00:03:25,030 --> 00:03:30,530 you're gonna get this psychedelic background on LSD, because the tiling is enabled by default. 41 42 00:03:30,550 --> 00:03:32,170 We need to remove that from here. 42 43 00:03:32,200 --> 00:03:36,370 Then we need to change the size of the image or we have this tiny image. 43 44 00:03:36,400 --> 00:03:37,690 We have 3 size options. 44 45 00:03:37,690 --> 00:03:43,500 First one is custom, that lets us give our image custom values. But that's not what we want. 45 46 00:03:43,510 --> 00:03:47,780 We want the image to spread and fill the entire space of the box. 46 47 00:03:47,800 --> 00:03:53,680 For that, we need to select cover, with cover the image will resize and crop so it can fit the full space. 47 48 00:03:53,710 --> 00:03:59,740 In other words, it will cover the entire space. With the contain, the image will resize to make sure that 48 49 00:03:59,740 --> 00:04:01,370 all parts of the image is visible. 49 50 00:04:01,600 --> 00:04:07,270 So no matter how you change the screen dimensions or the size of the div block, the entire image will 50 51 00:04:07,270 --> 00:04:08,440 always be visible. 51 52 00:04:08,440 --> 00:04:14,270 This means often there will be empty gaps. So cover is the best in our case. 52 53 00:04:17,410 --> 00:04:20,050 Now, as you can see, the covers setting is very fluid. 53 54 00:04:20,050 --> 00:04:24,630 It adjusts both the size and the cropping, to make the image cover the entire thing. 54 55 00:04:24,700 --> 00:04:28,870 If it needs to, it will stretch the entire image beyond its original size. 55 56 00:04:28,960 --> 00:04:34,150 When it comes to cropping. We have control over on which side it crops. That is controled under position 56 57 00:04:34,140 --> 00:04:34,830 options. 57 58 00:04:34,930 --> 00:04:42,320 This position map is a great visual way to adjust and see which one works the best. The default position 58 59 00:04:42,320 --> 00:04:47,390 which is top left, isn't very good. The laptop that she is looking at is actually important to the 59 60 00:04:47,390 --> 00:04:49,270 story. Without the laptop in the frame. 60 61 00:04:49,280 --> 00:04:50,870 We don't know what she's doing. 61 62 00:04:50,900 --> 00:04:52,370 The image gets confusing. 62 63 00:04:52,370 --> 00:04:58,550 So given this fact, we need to choose a position where laptop shows at all times. Centering might be better. 63 64 00:04:58,610 --> 00:05:09,030 This will anchor the image through the center and crop any excess on all four sides. 64 65 00:05:09,040 --> 00:05:13,990 For now, it's good when we put the content we might need to adjust. But we're forgetting one more size. 65 66 00:05:14,050 --> 00:05:17,950 The preview mode, which is the widest. We have to check there too. 66 67 00:05:17,980 --> 00:05:21,520 This might not be visible for you, but the photo is a little blurry here. 67 68 00:05:21,520 --> 00:05:21,880 Why? 68 69 00:05:21,910 --> 00:05:25,820 Because the image that we have exported is 1440 pixels. 69 70 00:05:25,840 --> 00:05:30,210 That's the size of our design frame in Figma. So on larger screen sizes, 70 71 00:05:30,220 --> 00:05:32,920 it will stretch and the photo will lose quality. 71 72 00:05:32,920 --> 00:05:38,470 Right now, the full width preview that I'm looking at, is 1920 pixels which is the 72 73 00:05:38,470 --> 00:05:40,430 dimension of my screen. 73 74 00:05:40,450 --> 00:05:45,790 This is significantly larger than the 1440, so the photo stretches beyond its original 74 75 00:05:45,790 --> 00:05:47,470 size. To fix this issue, 75 76 00:05:47,470 --> 00:05:52,990 we need to export larger image from Figma. And we need to export something that is going to be large 76 77 00:05:52,990 --> 00:05:57,890 enough to cover most of the screen sizes. And that's usually 1920 pixels. 77 78 00:05:57,910 --> 00:06:03,010 There are obviously larger resolutions than that, but we don't have to go too crazy because that's a 78 79 00:06:03,010 --> 00:06:04,750 very small minority. 79 80 00:06:04,750 --> 00:06:10,780 And even in those cases, people who use very large screen sizes, they don't use their browser full 80 81 00:06:10,780 --> 00:06:15,310 width on their screen size. So often they will still shrink it and they might be still looking at it 81 82 00:06:15,310 --> 00:06:17,380 on the 1920 pixel size. 82 83 00:06:17,670 --> 00:06:23,650 OK, to export larger size for our image, we can simply input the width we want in this size setting. Put 83 84 00:06:23,650 --> 00:06:30,550 1920 followed by "w" for width. And that way we'll export the photo in 1920 pixel 84 85 00:06:30,550 --> 00:06:30,810 wide. 85 86 00:06:31,270 --> 00:06:36,100 When you do this, make sure that the original image, that you put here is at least 86 87 00:06:36,100 --> 00:06:37,230 1920 pixels wide. 87 88 00:06:37,240 --> 00:06:41,530 Otherwise, you're just stretching the image, like spandex and that's the same thing what happens in Webflow, 88 89 00:06:41,530 --> 00:06:42,540 so it's pointless. 89 90 00:06:42,550 --> 00:06:48,250 The original image that I placed in Figma was big, I just shrank it down to position it perfectly in the 90 91 00:06:48,250 --> 00:06:48,910 frame. 91 92 00:06:48,910 --> 00:06:49,180 All right. 92 93 00:06:49,180 --> 00:06:56,160 Now we can compress this image. So let's go to imagecompressor.com or Optimzilla. And it's done 93 94 00:06:56,160 --> 00:06:58,230 a great job shrank it quite significantly. 94 95 00:06:58,230 --> 00:07:01,380 Now we can go back and upload it for our hero section. 95 96 00:07:12,220 --> 00:07:17,200 And that's all. We have learned how to use background styles insight Webflow, primarily the image setting 96 97 00:07:17,200 --> 00:07:24,010 and how to position it perfectly to make sure it stretches and shrinks very well on many 97 98 00:07:24,010 --> 00:07:28,240 different screen sizes. I have skipped couple of other rarely used settings inside the background styles, 98 99 00:07:28,270 --> 00:07:32,890 but by now you already know my teaching style, I don't like to clutter your brain with things until we 99 100 00:07:32,890 --> 00:07:33,640 actually need them. 100 101 00:07:33,700 --> 00:07:36,370 We're going to continue with the hero section in the next video. 101 102 00:07:36,370 --> 00:07:37,150 So stick around.