"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

score 1 · Accepted Answer · answered Apr 20 '18 at 14:15

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.

answered Apr 20 '18 at 14:15

korops

31
11

Spot on! Just what i was searching for. I was trying to achieve the exact same thing with large images in a quick mockup project. Everything was working fine on PC/Mac/iPhone but not my Android device Chrome Browser. Reducing the large image size from 8000x6000px to 2048x1365px did the trick! Thanks! – JCOlofsson Jul 11 '19 at 13:02

score 0 · Answer 2 · answered Apr 20 '18 at 13:16

0

You could use this property :

background-size: x% y%;

The first value is the horizontal position and the second value is the vertical.

So you can try :

background-size: auto 100%;

answered Apr 20 '18 at 13:16

Thanks for replying! Unfortunately it doesn't work. Even when I use "auto 100%", it still looks like picture #2. – korops Apr 20 '18 at 13:39

"Background-image: cover" broken on mobile

2 Answers2