CSS background-image JPG saved as progressive but website renders baseline

Question

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

In CSS this JPG is set as a background-image with a linear-gradient over it.

background-image: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.2)
    ),
    url(../images/coverpage.jpg);

Removing the linear-gradient makes no difference, it still loads baseline.

Other threads on this topic have the issue where the progressive JPG just doesn't load and then suddenly appears. However in my case it loads baseline (rather than not loading and appearing).

Any help or suggestions would be much appreciated. I've run out of ideas on this.

Please see below codepen example. I've left the image completely uncompressed to help see the baseline load.

https://codepen.io/AndyH2020/pen/GRNJRrq

Thanks

Andy