title: Can I implement a CSS-only fallback for background-size?
body: <p>This works well for browsers that support <code>background-size</code>. Otherwise the 2x image is zoomed.</p>
  
  <pre class="lang-css prettyprint-override"><code>.a {
    background-image: url(img2x.jpg); /* 1000x1000 */
    background-size: 100%;
    height: 500px;
    width: 500px;
  }
  </code></pre>
  
  <p>This should be used for browsers without <code>background-size</code> support.</p>
  
  <pre class="lang-css prettyprint-override"><code>.a {
    background-image: url(img1x.jpg); /* 500x500 */
    height: 500px;
    width: 500px;
  }
  </code></pre>
  
  <p>Is it possible to trick the browser to fallback when <code>background-size</code> is not supported? I know I can use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports"><code>@supports</code></a> but it's much less supported than <code>background-size</code> so quite pointless in this case. I don't want to use JavaScript either.</p>
  
  <p>Basically like so, except work!</p>
  
  <pre class="lang-css prettyprint-override"><code>.a {
    background-image: url(img1x.jpg); /* 500x500 */
    height: 500px;
    width: 500px;
    /* stop parsing this rule when background-size is not supported */
    /* otherwise continue parsing and set different background-image */
    background-size: 100%;
    background-image: url(img2x.jpg); /* 1000x1000 */
  }
  </code></pre>
  
  <p>This doesn't work obviously, but is there a trick which could make it work? Thanks.</p>