Check out a free preview of the full CSS In-Depth, v2 course:
The "Background Image" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Background images can be jpg, gifs or even SVGs or data blobs. You can also add multiple background images.

Get Unlimited Access Now

Transcript from the "Background Image" Lesson

[00:00:02]
>> Estelle Weyl: The next one is a background image property. Originally, the background image is used to declare an image on your background, it can be one or more images. Originally, we were just given one image, and we had a few properties, including the background image, and then background-repeat, attachment, position and color.

[00:00:24]
>> Estelle Weyl: That's why I always suggest to people to not use the background shorthand. Because when you use a shorthand property you're actually overwriting the background color, the background position, the background attachment and the background repeat. And I like to put my global reset, background repeat, no repeat, cuz I very rarely wanna repeat a background image.

[00:00:46]
>> Estelle Weyl: So you could use as a value for background image either non or the URI of an image or inherit and then we'll inherit the image from its parent and I don't think anyone would ever wanna do that intentionally.
>> Estelle Weyl: A few tips for background images. If you're going to use a background image, ensure there's enough contrast between the text and your image.

[00:01:13] So we were talking about color contrast ratio a little bit yesterday for people with low visibility or low vision rather, you want a significant contrast. And then when you have a background image, unless there's transparency in that image, you usually want a background color. Because if the image doesn't come through and let's say you have a really dark image so you have white text.

[00:01:38] And then you have a white background cuz you didn't put a background color. Or you're gonna have white text on a white background, and that's not gonna be good. Background images do not print by default, and there's no way to improve accessibility on background images. There's no way to say, background images should be purely decorative because there's no way to provide alt text to describe to the user.

[00:02:01] What the images, what to describe to your most significant blind user which is Google. So the multiple background image syntax is basically declaring one image, comma separated and the next image. And if you noticed here is its background image green and then blue and if you're not color blind you see that the blue one is in the back.

[00:02:24] So it basically gets painted back to front, so the last one gets painted first and then the first one gets painted on top of it.
>> Estelle Weyl: They are comma separated in the cross-fade function.
>> Estelle Weyl: So cross-fading is the ability to basically cross-fade between two images. And it is supported in some browsers and not in others.

[00:02:55] So ones where it's not supported then one that you declare, the image that declare first will be on top.
>> Estelle Weyl: Then image-set is the ability to declare a set of images. And let's go again to can I use and do image-set.
>> Estelle Weyl: Again, it works only with the webkit prefix.

[00:03:19] So this is something that you can't quite use quite yet but I did wanna point it out, because it will eventually come in, and it is part of the spec. So the type of images we can currently use is the key term none, which is very useful when you're overwriting an image that you already declared and you don't want it on this element.

[00:03:45] You can use the URL, and so you put URL, and then in parentheses you can put a single image. Or you can put the URL in parentheses with a single image, and then the comma, and then the next one. You can also use data URIs. So in this first example I have a GIF and it's base64 and the data URI is right there.

[00:04:06] And that reduces the number of HTTP requests. We don't wanna do that if it's a tiny, little image because this is not the most compact width pulling in images. So you won't wanna do a huge JPG or PNG with that. And then the second one is an SVG image.

[00:04:24] So you can actually just put the code right there and not have an HTTP request if you're gonna have an SVG. And SVGs, it depends on what you're creating with your SVG. Generally, my SVGs are tiny because I am not a graphic designer, and I'm basically just making shapes.

[00:04:40] So it depends on the complexity, but that might be a useful way of reducing an HTTP request and improving performance. Then we also have linear and radial gradients. We also have linear repeating gradients and repeating radial gradients, and we also have conical gradients. We'll go over the linear, radial and the repeating ones but not the conical ones later on today.

[00:05:04] In the future if you look up at the spec it says, image and then parenthesis elementand then parenthesis, image set and then parenthesis and cross-fade and then parenthesis. That's why I showed you the can I use, because there's these four other features in a specification. And right now, it kind have only works in Firefox cuz it's been working there for a long time, the image and the element.

[00:05:30] So in Firefox, you can actually say element and you use to be able to do this, I think they might have deprecated it. But you can actually put a canvas on the page, or design a canvas in the background, give it an ID, and then put it as the background of image, of an element rather.

[00:05:50] And then with the image, you can do a few things. The first one is basically picking up a Sprite and then putting in hash and then saying xy and then width and heights in the starting point and then the width and height of the area you wanna show and basically clip your background image.

[00:06:14] This is not fully supported, it was supported in Firefox long time ago. I don't know if it's even still supported there. And then the second one is image and then it's basically, try finding this image. If that doesn't work, try finding the next image. If that doesn't work, try finding the third.

[00:06:29] Which will be really nice if we could have cuz then we could do a WebP and a JPG XR, and then just a regular JPG, and see whichever one is supported in that browser, they could use that for backgrounds. Cuz we do have the picture element, and we do have media queries, but it would be nice to just be able to declare a background image in one way.