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