"Background-image: cover" broken on mobile

Question

I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:

However when I check the site with my phone it displays the whole image distorting it.

HTML:

<header class="wide">
</header>

CSS:

body, html {
    height: 100%;
}
.wide {
    width: 100%;
    height: 100%;
    background-image: url('sebastian-unrau-42537-unsplash.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 1199.98px) {
    .wide {
        background-attachment: scroll;
        background-position: initial;
    }
}

The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.

Now if I remove "background-size: cover":

It's kind of closer what I'm after but not quite. Am i missing something?

My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109

Answer 1

Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.

Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.