Variation 8: background gradients and images

- [Rik] So the next thing we're gonna work on is this background grading on Mirror so, now I'm not gonna use the gradient that she's made. I've actually just made my own, which looks something like this. Now if you do wanna make your own gradient, what you can do in Figma is make a frame and just fill it in using a linear gradient, looks like this. So I've just switched from solid to linear and then I've exported it as a PNG.

Put it on my desktop and I've added it into my project that looks like that. So how do we add this image into the background of the page? Well if we go back to our style.css, we have in here a background color and it's this kind of black color. Now what I can do is we can see it in here is at the moment the whole page has this black background. But what I can also add in here, if I add some space, we can also add in here a background-image.

And this is an image in the background of this tag. In this case the whole page, and I can select this by picking the image that I want background.png. Now if I'm writing this out, I have the right url(background.png). And what this will do is it will put the background in like this. Now you might notice at the moment it's a tile pattern, so it's everywhere this way, everywhere down the page and repeating as we go.

What if it's I don't want to repeat this, so to stop this repeating. What I'm gonna do is turn this off. So underneath I'm also gonna add in a background-repeat and in here we have a few options. The default is repeat, which is the tile effect that we're using. If we have no repeat in here, we just have one image in the background there it is, we can position it up as we want to later on, but that's kind of the single image in there.

We wanna repeat across the page. So we're gonna do repeat-x only. So here we're repeating in the x-direction across the top of the page. Now if you wanna move this around the page, let's say we want it in the middle of the page, how do we go about this? So the thing that I'm gonna do is I'm gonna to change the background position. So the background-position. And here what I can say is in here there's a few different things I can put in.

I can put in a position across, I want it to be 50% across and 50% down. So this is in the middle. If I apply this, there's some shortcut ones, We can just write the word center in here, center left, center up and down. And what we'll see is. Why is this not in the middle of the page? Well technically it is technically if we scroll down, it's in the middle of the page because this is the distance from this bottom in the middle to the top.

But what is if you were to keep this in frame, we wanna kind of fix it in this. So it's always in the background. So to add that in, what we can also add in is a background-attachment. Where is this attached? Now by default it's attached to the page itself, but we wanna fix it to the browser. So to do that we're gonna fix it to the browser screen. So by doing this it will always be in the background, so it's always there at all times.

Now of course we might wanna do is have this be in the full height of this page. This is something that Mirror actually wanted, but it was hard to kind of show in Figma. She always wants it to be this at the top and then the pink at the bottom of the page. So to do that we need to give it some size, so the size that we want it, isn't exactly the same as what the frame is. The frame at the moment is 10 at 20 by 360, we want it to be 20 by however tall the page is.

So we're gonna do background-size. This takes two things, the width and height. We're going to do 20px and by default we would have something like this 360px. But we don't want it to be 360px. We want it to be 100% of the height of the browser. So we're gonna change 360px to 100%. And by doing that, we will have something that fills the entire browser that looks like that.

So this is kind of what Mirror wanted in her design work. We actually changed it up so it looks a little bit different, and we've added our own color. So just by adding these backgrounds, different styles in here, we've added image of repeat, a position an attachment and a size.