The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background:cover and Safari

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #198369

    Hi fellas!
    Hopefully someone can help me understand what’s happening here!
    On a webpage I have built in background-images

    ‘.pictures { position: fixed; width: 100vw; height: 100vh; background: no-repeat fixed; background-size: cover }’

    alignment is controlled via js for every image, everything works just fine – except for the newer versions of safari where – no matter what – the browser cuts of some of the image at the bottom.

    So far we have figured out that it seems to have something to do with whether the user has any toolbars active on top of the browser but still I have no idea what do to.

    Has someone else encountered this weird issue and might be able to help?
    I’d be really thankful! :)


    You might want to look into the Known Issues at

    However, since this is Safari-only issue and only one some machines it’s not likely to be a solvable CSS issue as such, more of a browser issue I suspect.


    Have you tried resizing the browser window on desktop to see what happens with the background? From what I know, it is what can be expected from background-size: cover. Unless the aspect ratio is exactly that of the image, some of it will always be cut off. But maybe I’m missing something here.


    thanks Paulie, I’ve tried to go with measures in % instead of the viewport-units but I’m afraid you are right.

    : sure I’ve tried. But if I’m aligning my picture to bottom center it should cut it off at the top and not up to a certain point at the bottom.

    I’ve checked on other sites with full screen backgrounds now and they all do the same thing in safari 8. Seems to be browser related issue, but it could’ve been possible, that someone may know a work-around :)

    Thanks for you help though!


    Okay, no problem. Didn’t know about the bottom alignment. I read on SO it’s likely to be related to background-attachment: fixed :

    Hope that solves it.


    That’s also in the CanIUse spec I see… use that site a lot but never realised known issues were listed as well.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.