Background Images & Gradients

[00:00:00]
>> Kevin Powell: And so far we've looked at colors, but we also have background images as well. They're a very nice way to spice up our websites with the background image longhand. Really quickly before I talk about that, I do just want to mention that if ever you have a background that should be over your whole page, you can add a background to the body, and it propagates down to like the viewport itself. So if you don't have a lot of content, technically your body is actually pretty short.

[00:00:25]
We don't actually need this in our project, but if you did come in on the body and say you had a background color or a background image. So background color red. Anywhere that we haven't declared it is going to get it. That's going on the body itself, but it's beyond the body, it's the entire viewport is going to get that red color on it. So just one of those ones that's technically not inherited, background color is not inherited, but it's one of the ones that you'll often put on your body just as a general starting point as well.

[00:01:00]
But as far as background images go, they're interesting because they're used for both the background image property is used for both images and gradients, which seems a little bit weird, but gradients are the special CSS thing that they're actually considered images, like a gradient is a type of image in CSS, so we do use background image even for gradients. For them, we have a URL function if it's an actual image that you're using.

[00:01:28]
So just like before, you might have an image somewhere and then we use the URL. This is a lot like when we used our fonts before. We're setting up fonts, it was with the URL and you put the path to the image or the path to the font before, now we're putting a path to an image. One thing with background images though, is they're kind of weird. At the top here, I have a very big image, and you can see it's spilling, like it's filling up the entire space.

[00:01:51]
I have the exact same image down here, but a small version of it, and instead it's really tiny and it's tiling itself. If I resize this on the big one, I'm not actually like resizing the background image. I'm just resizing the space and it's cropping off more of the image. And over here where we have the tiling going on, it's just doing some like tile, it just cuts off the tiling. Background images are decorative.

[00:02:13]
It's really important that you remember that. People start using background images and like, I need to see the whole thing, or I need to like, the text is probably going to be on top of it, and the text is the part that people need to be able to read. If it's a background image, it really should be decorative. Now, we have control over it, we can stop it from being tiling like this, but it's really important just to remember, you will probably be cropping your image in one way or another, if you're using a background image, unless you match the exact aspect ratio of the image.

[00:02:43]
Because what it's doing is it's just has this image, it goes, I'm filling up this background space with it, and if that image isn't big enough, I'm tiling it. Now here, I just have the big and small classes to like apply the different ones, so any change I make here will apply to both of them. One way we can control it is a background size. You can actually be explicit. I can say it's 500 pixels by 500 pixels to say how big the image should be.

[00:03:09]
And it will make the image that size. I'm going to exaggerate here and say 100. And when you are resizing them, it's going to stretch the image and distort it and it will not look nice. It's very, very, very rare. There are times, but it's very rare that I'll set a background size with actual pixel values. Most of the time I'm using one of two keywords, and it's usually the cover keyword. Cover just means cover the space as best as you can, or it will cover the space, but you can see it's actually not exploding in size anymore, it's a little bit more reasonable in how it's working, but it still will crop the image.

[00:03:45]
And if I come and look, I get the exact same result here, except it's really blurry, because it was a small image. So the big one is covering, it's shrinking down to fit the space. The small one doing the same thing but it has to stretch to fill the space in the same way. Small images lose quality because as they're, they don't have that pixel information, so they'll get blurry. That does not mean you can use giant images like I did here and just rely on background size cover, because then you're loading in giant files that weigh a lot for no reason, because you're just shrinking them down.

[00:04:13]
So you do need to find a balance along the way in how big the image should actually be, and it's really a case by case scenario depending on the image that you're bringing in. There is another keyword you can use here which is contain. You don't use this as often. Contain will not crop any of the image, but it will tile it. So it's always going to show you the entire image and it will just tile it in a different direction depending on the space available.

[00:04:42]
So it's a little bit strange in that respect. With that contained on, or actually I'm going to do the 500 by 500 again. Just really quickly so we can talk about background repeat. With a background repeat, I can say that we have no repeat. Repeat, there we go. And it won't repeat the image anymore, so you just get empty space where it was previously. You can also choose it to repeat only on one axis.

[00:05:15]
Repeat X and it will only repeat along the X axis, or a repeat Y and it will only repeat along the Y axis. This was used a lot more in the old days where you'd have like a repeating pattern. You might have a banner that goes across the top with a PNG and you only wanted it to repeat in one way. I don't see this used as much as it used to be. Most people these days use a no repeat because they are having the image fill up the entire space anyway.

[00:05:40]
Though if you are using a background size of cover, you don't really need to come in with the repeat. It's not really doing anything because the image won't repeat with the way cover works. The other property we have is background position. When we use a background position, you can say where to go. Like background size, you can provide specific location. 100 pixels, 200 pixels, so it's an X and Y coordinate.

[00:06:09]
And it moves the image over 100 and down 100. It's starting it here, the image is going that way. There's extra space now available, so it is tiling. I could turn off that tiling if I wanted to with a no repeat. Again, not very often. Sometimes you need this, there's sprite maps and other things where you might actually be using this to get specific locations, but for images the way we traditionally use them like this, usually you don't give specific values, but you can come in with things like center.

[00:06:37]
And it's going to pick the center of the image based on how it's then cropping it. So as this is getting cropped, it's going to crop the left and the right off, we're keeping focus on the center. Or I could say bottom right. And now it's going to keep the bottom right in focus, and it will never crop that out, it will crop the rest of the image depending on how things are growing and shrinking. And we could do like a center, center top, center bottom, you can always put two keywords or just one of the keywords, and it will sort of figure out the positioning of it.

[00:07:02]
So if you do have a focus point that's important, that's the way that you would do it with a background image.