title: CSS background-image JPG saved as progressive but website renders baseline
body: <p>I have a JPG which was saved as progressive using GIMP. When I check the JPG using online tools it shows as progressive. However the image always loads baseline</p>
  <p>In CSS this JPG is set as a background-image with a linear-gradient over it.</p>
  <pre><code>background-image: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.2)
      ),
      url(../images/coverpage.jpg);
  </code></pre>
  <p>Removing the linear-gradient makes no difference, it still loads baseline.</p>
  <p>Other threads on this topic have the issue where the progressive JPG just doesn't load and then suddenly appears. However in my case <em><strong>it loads baseline</strong></em> (rather than not loading and appearing).</p>
  <p>Any help or suggestions would be much appreciated. I've run out of ideas on this.</p>
  <p>Please see below codepen example. I've left the image completely uncompressed to help see the baseline load.</p>
  <p><a href="https://codepen.io/AndyH2020/pen/GRNJRrq" rel="nofollow noreferrer">https://codepen.io/AndyH2020/pen/GRNJRrq</a></p>
  <p>Thanks</p>
  <p>Andy</p>