title: CSS - Display Alternative Image When Original Not Supported
body: <p>I'm building a website and I want to use the <code>WebP</code> format for my images. I know than <a href="https://caniuse.com/#feat=webp" rel="nofollow noreferrer">not all browsers support it</a>, so I want to display an alternative <code>JPG</code> image if <code>WebP</code> is not supported. I have a <code>div</code> with this class applied to it:</p>
  
  <pre><code>.my-class{
      background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.webp');
  }
  </code></pre>
  
  <p>I want to add something to this class that displays an alternative <code>image.jpg</code> if the website is used on a browser that doesn't support <code>WebP</code>. <strong>How can I achieve this (With pure CSS)?</strong></p>