Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:8Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Using WebP With CSS

If you want to use your WebP images as CSS background images, it’s going to take an extra step. In this lesson, you will learn how to use Modernizr.js to detect your browser’s supported features and provide fallbacks for your CSS WebP images.

Useful Links

2.6 Using WebP With CSS

Hello and welcome back. In this lesson we're gonna talk about how to use WebP in CSS with background images. And again, just like with HTML, it's very easy to do, but we're gonna come across some of the same issues with browser compatibility. So we're gonna talk about how to overcome those issues. So I've got another file open called index2.html, and you'll notice in the body all we've got here is a header. And in that header, we have a little bit of h1 text. I've also got some styles here, I've set up a font family for the body. And for the header I've given it a gray background with white text, with 100%, height 400 pixels, and then set the line height and center aligned to the text. So if we take a look at this in our browser, it's a very simple file. So it's just a gray background with some centered text in it. Now I wanna take a look at throwing a WebP image in the background. So let's go back to our HTML and in the header of our document, right now our background is just set to gray. I'm going to create an image here or insert an image here, so the URL is going to be our nature-10.webp file. I'm also going to align it, vertical and horizontal both to the center. And then I'm gonna set it to no repeat. And then I'm also gonna set a background cover property, I'm sorry, background size property and set that equal to. We're gonna spell that right, and we're gonna set that equal to cover. So let's save that, and jump back into our browser, and we're gonna refresh that page, and it looks a lot better. Now we see the image in the background, and it looks nice. So we've got a WebP image in the background. So as you can see, it does work in CSS just as well as it does in HTML. But unfortunately, if we take that and copy it, and then paste it into Internet Explorer, we see that that background image does not work. So let's talk about how to make that work. And to do that, we're gonna use a tool called Modernizr. Now a Modernizr is a JavaScript tool that allows you to detect what features your user's browser supports. And you can download the whole library or you can specify what features you actually wanna look for, so that you don't have to download this bulky JavaScript library, most of which you won't actually need. So if we go to modernizr.com, and you´ll notice there´s no e before the r in Modernizr. If you go to modernizr.com and click on the Download link, you'll notice there are all kinds of features here that we can look for. So we can test to see if our user's browser supports these features. So if we click in this search bar here and just search for WebP, and then scroll down a little bit. You'll notice there are a few different options here. So we have WebP alpha, animation, lossless and then just WebP. I'm just gonna search for WebP, it's the more generic one there. And we can click on it and see a description over here on the right of what exactly it's looking for. And we can click on this little + icon next to it to add it to the list of things we wanna check for. So if there are other things, we can search for those and add those to the list, but really WebP is all I'm concerned about here. So once I've added that, I'm gonna click over here on the right, on the Build button, and I'm gonna click on Copy to Clipboard. So this gives us the entire JavaScript text that we need. So just to double check I'm gonna right-click on that and copy it. And then in our folder here, I'm gonna create a new file called Modernizr.js. And in that file, I'm just gonna paste everything I just copied, okay? So we've got our JavaScript file here. Now we need to include it, so we go back to our index2.html, and then in the head of our document, just below our styles, I'm gonna create a scripts tag and the source is going to be modernizr.js. So what does that do for us? Well, let's go back into our browser now and go to index2.html, and let's refresh that. And I'm gonna right-click and I'm gonna go to Inspect. And then up at the top, here's our HTML. You'll notice that in our class list, it has added WebP, WebP alpha, WebP animation, WebP lossless. So now we can target these classes to specify what we wanna use as our background image. If we go into Internet Explorer and refresh our page, then we'll right-click. It has restricted, let's allow the blocked content, and then let's try that again. So then I'll right-click, and let's inspect the element. And here's our HTML, here we have a class of no-webp. So this modernizr JavaScript library has added some classes to our HTML to let us know what our browsers support. So this no-webp class we could use to change the background image. So let's go back to our HTML file, and here we have our header with our background image in it. And we could do this one of two ways. We could set, like we have here, we could set the default image to the WebP image and then create another rule, that would basically point to html.no-webp header. And then in that one we could create a background that uses the JPEG image instead. So we could do it that way or we could use the JPEG image by default. And then over here we could create a rule for html.webp header and then use the WebP image there. Well, I like to be a forward thinker, so I'm gonna use WebP as the default. And then I'm gonna use no-webp for the fallback. So we've created another rule here for the header element inside an HTML document with a class of no-webp applied to it. So when there's no WebP, we're simply gonna change this. So we're gonna grab that background rule, we're gonna paste it here, and we're gonna change this to nature-10.jpg. So we'll save that, we'll go into Chrome, and we'll refresh, and everything still looks fine there. Now let's jump into Internet Explorer and refresh that page, and now we see that everything looks fine there. Now as you can see, our image isn't going to the edges here in Internet Explorer, so we might need to double check that and see why. Let's just add that background size cover here, save that, and refresh, and there we go. So now, we've got it working in both browsers. We're prioritizing WebP for browsers that support WebP, but for browsers like Internet Explorer that do not support WebP, we can still fallback to that JPEG image. So now we can use WebP in out HTML and in our CSS. Thank you for watching, and I'll see you in the next video.

Back to the top