Home Page Background Images

[00:00:00]
>> Kevin Powell: So let's improve our homepage again. For this one, I am providing there is the starting code if you haven't been following along, once again, that you can get in the GitHub repo or in the copy-paste elements that I have down here. And we're going to add a background image because it's going to look a bit nicer, and over here we can add a little bit of a gradient. So for the here, for these, we do need the image as well.

[00:00:19]
So let's get the new version of the image. It's the same image, it's just higher quality image. So let's save that image. I'm in the right place, so I'm going to save that. And let's jump on over to our project. So that's on the hero. We're going to come in on here and instead of having a background, which I use the shorthand for, which would have been my background color, we can now remove that, or I'm going to leave it actually, just to show you something, but we will come in with a background image with our URL because it's a background image, so we have to tell it where that image is.

[00:01:02]
So then from here we need to get to the right location. So let's just full screen this. We want to go from the style folder that we're in and go back a step. So we go back, then we want to go into the images folder. So images. In the images folder, we have the chess BG, which is the newer, higher quality one than the other one. So chessBG.jpeg. And if we go and take a look now, we should see that there we go, we have the image is coming in in the background.

[00:01:35]
Let's full screen that and take a look. We have some tiling going on because it's a background image, so right away we can say that the background size is going to be cover. Just background image and background size cover are like the two friends, you use them together a lot, and now it stretches to fill up the entire space. Awesome. The other thing that I did when I had this in the design files is you might notice the opacity of the background on here is a little bit lighter, so we can go back to VS Code where I'd set this as a variable when we first set that up, with my solid background here.

[00:02:15]
There's a more advanced way with modern CSS that we can lower the opacity, but I think that's getting ahead of ourselves a little bit. We'll keep it simple. It's just going to be white. So 0, 0%, 100% to get pure white. And then we come in with a lower alpha value. And we can see that it's lowered the opacity down and we can see through it a little bit, makes it look a little bit fancier. The next thing we want to look at is the footer where the new design has a gradient, so instead of having the solid color here, we can come in with a background image and we can just do a linear gradient.

[00:02:59]
And when you're using gradients, we're just putting in color values, so one of those values can be a custom property. There's nothing wrong with that whatsoever. So if you want to, we could say that in here we have a color neutral 800 and maybe we just say black for now to go to pure black, just to see what that would look like. I broke my padding along the way because I forgot to put my semicolon.

[00:03:26]
And then we get that gradient that's coming in. Maybe this needs to be a little bit lighter if you want to match the design perfectly. I'm not, they didn't put this project together to try and get pixel perfection, so if you want to play with the colors a little bit, you definitely can. It gives us just a little bit of a subtle gradient. I think it looks pretty decent, and now the site looks a little bit nicer than what it did before.