0

I'm trying to make a website that has multiple fixed and stretched backgrounds on some divs. Super easy, just use :

background-image:url(../some-image.jpg);
background-position: center center;
background-attachment: fixed;
background-size: cover;

on each div that needs a background but for some reason, on iOS, the backgrounds are not fixed and are not stretched to the correct size.

I found this fix here : https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/page/3/

.bg {
    background: url(image.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: center center;
    background-repeat: no-repeat;
}

basically he's giving the dimensions and the fixed attribute to a div instead of the background directly. My problem is this works if you need only 1 background but I can't figure out how to do it with different backgrounds on seperate divs.

Seb
  • 11
  • 3
  • i found a temporary workaround. I managed to have 1 fixed background by actually fixing the div instead of the background but this works for only 1 background so my other backgrounds are only fixed if the screen is bigger than ipad (1024). By the way "cover" attribute works fine once you remove "fixed". – Seb Oct 03 '16 at 20:14
  • Here you can find the full solution for it: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483 – Viktor Tabori Apr 25 '17 at 00:43

0 Answers0