4

My Problem is that I want to use a WebP-Image as a background-image but I need a fallback-option for old browsers (jpg-Image).

I have found a JavaScript Solution in the Internet, where it looks if the browser can use WebP-Images or not but it's not only-css and because it's JavaScript I want to avoid it.

Maybe you could use it like with fonts. First you are setting the option for the modern browser(woff2) and then you set the fallback-method(otf)

The problem is when you do this like fonts you set multiple backgrounds and it will load every image. So you don't have a faster website.

@font-face { 
    font-family: 'your-font';
    src:url('your-font.woff2') format('woff2'),
        url('your-font.WOFF') format('woff'),
        url('your-font.otf') format('opentype');}

Is there a solution you can do this with background images too?

klediooo
  • 630
  • 1
  • 7
  • 25
  • The JavaScript option is handled with https://modernizr.com It's a JS-Library to check if a specific function is avaible for the user. – klediooo Sep 24 '19 at 16:54

0 Answers0