All geek questions in one place

Fixed background on ipad

I cannot find a way to correctly display the background image of a single website on an iPad.

I have a fixed background in the viewport, and the pages scroll around the background. The page structure is as follows:

<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 css:

 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 great on a desktop browser, as you can on boardline board.com website , but it doesn’t work on an ipad: the background scales weirdly, as you can see on the next iPad screen capture. Can you help me fix this?

thanks

ps: there is a partial answer here with background binding: scroll. But it does not satisfy.

enter image description here

+6
source share
2 answers

This person uses 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 culture for 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/

+1
source

The simple answer: there is no way to correctly display the background image on the iPad when using the “cover”.

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

Configure the media query for the largest size you are trying to target (or set classes based on device type using javascript) and do the following:

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

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

0
source

Source: https://habr.com/ru/post/973537/

More articles:


All Articles