Menu
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.
347
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
Set a background image using the HTML body elementAdd the bgproperties="fixed" code into the body element, as shown below. Next, add the background="location" attribute to the body tag, where location is the relative or absolute URL of the image. In the above example, background="bg.
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/
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
