6

I can't a find a way to correctly display the background image of a single page website on iPad.

I have a fixed background in the viewport and the pages are scrolling over the background. The structure of the page is the following :

<body class="landing-1-b">
    <div class="container">
        <section class="intro viewportheight_min" id="intro" class="currentSection">
        ...
        </section>
        <section class="keys viewportheight_min" id="keys">
        </section>
        ....
    </div>
</body>

And the css is :

body, html, .container, section {
    height: 100%;
    margin:0;
    font-family: "FuturaStd-Light", "sans-serif";
}
html {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This works perfectly on a desktop browser as you can on the website here boardlineapp.com but it doesn't work on ipad : the background is weirdly zoomed as you can see on the following iPad screen capture. Can you help me fix this ?

Thanks

ps: there is a partial answer here with background-attachement:scroll. But it's not satisfying.

enter image description here

Community
  • 1
  • 1
Louis
  • 2,548
  • 10
  • 63
  • 120

2 Answers2

1

This person uses a jQuery solution for this situation:

http://blog.mathewcropper.co.uk/2013/12/css-background-size-cover-and-safari-for-ios-7/

I would suggest using a different crop on the image itself for this particular orientation:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

http://stephen.io/mediaqueries/

Christina
  • 34,296
  • 17
  • 83
  • 119
0

The simple answer is: there's no way to make a background image display correctly on an iPad when using 'cover'.

I'm not sure about all mobile devices, but Apple mobile devices (iPad, iPhone) do not show background-size: cover as you would expect it to.

Set up a media query for the largest size you are trying to target (or set classes based on device type with javascript) and do something like:

background-attachment: fixed;
background-size: auto 100%;

You can play around with the background size attribute, or you can show a completely different image for the background on these devices, one for landscape and one for portrait, and display them accordingly.

PBwebD
  • 778
  • 11
  • 33