Check out a free preview of the full CSS In-Depth, v2 course:
The "Background Image Future" 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:

Estelle discusses how future background support will support crossfade, image sets, media fragments, canvas and more.

Get Unlimited Access Now

Transcript from the "Background Image Future" Lesson

[00:00:02]
>> Estelle Weyl: So here are kind of the examples I showed on the previous page. And then I just added this little one thing right here. Which is, this was working in Firefox. And it's basically saying url, sprite, PNG, and then just show this one little area of that image.

[00:00:25] But the thing is, browsers they would who just don't understand that, would just not use that hash at the end, right, they would just show the whole, which is not the best use case because then you'd be showing the whole sprite. But it might be a use case if you just wanna shrink it just a little bit then that might be good.

[00:00:49] So because of this issue, in this case that this media fragment will not break anything. It will just be ignored in browser that don't support it. But this would be nicer because you could, as you say, background image, and then do URL, and then the full image, and then the next would say background image, image, and then do just the fragment that you wanna show.

[00:01:10] And then that would be more backward compatible. Okay, so that's it for URL values. And media fragments, yes?
>> Speaker 2: I was gonna say I turned off the warnings about nonsecured content and that started working on my browser.
>> Estelle Weyl: Did I forget to HTTPS it? Yeah, which one?
>> Speaker 2: Right over there, yeah.

[00:01:33]
>> Estelle Weyl: This one? Okay, thank you.
>> Speaker 2: No problem.
>> Estelle Weyl: You're awesome, okay.
>> Speaker 2: [LAUGH]
>> Estelle Weyl: So media fragments.
>> Estelle Weyl: This is kind of not really the best can I use, because this is media fragments for the timing on video and audio clips. You know how it can just show starting at 22 seconds on a video?

[00:01:57] That's pretty well supported. Hopefully, we will get it on images soon. Okay. So a little bit of, remember when I said it was supported in Firefox? So it's actually supported with -moz-element right now, it's now just supported outright. Which was picking, the element is basically giving an element somewhere in the dom.

[00:02:27] It doesn't have to be visible on the page. And then referencing the idea of that image, whether it's a canvas, an SVG, or anything, and say use that ID as a background. And you can actually put a whole, be really meta, put an ID on your body, and then take the body and put it as a background image, of its body.

[00:02:49] It would be stupid, but you could do that. But if you want to do it, you'd have to do it with -moz-element. And then this thing right here, when I was saying the image and you could actually just put a section of it with the media fragment. It is working in Mozilla with -moz-image-rect.

[00:03:09] So it's not just image, it's image-rect [INAUDIBLE].
>> Estelle Weyl: And then, future, hopefully this will come in some time, are these two features, they're not at all supported yet. Which is saying that first and the second image and third image and if none of those works make it blue.

[00:03:35] Or background image saying use this in a right to left language and then this other image in a left to right angle. But what we can do instead of doing this right now?
>> Estelle Weyl: You could actually use the DR, DIR or the lang attribute and find out and put it based on that.

[00:04:00] So those attribute selectors that we learned yesterday, super useful. Okay. These are just more examples. Nothing more to see here.