固定在ipad上的背景 [英] fixed background on ipad
问题描述
我无法找到在iPad上正确显示单页网站背景图片的方法。
我在视口中有固定的背景和页面在背景上滚动。页面结构如下：
< body class =landing-1-b>
< div class =container>
< section class =intro viewportheight_minid =introclass =currentSection>
...
< / section>
< section class =keys viewportheight_minid =keys>
< / section>
....
< / div>
< / body>
而css是：
body，html，.container，section {
height：100％;
保证金：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;
}
这可以在桌面浏览器上完美运行，就像你在网站上一样
I建议在图像上使用不同的裁剪来实现这个特定的方向：
@media only screen
and（min - 设备宽度：768px）
和（max-device-width：1024px）
和（方向：肖像）{/ * STYLES GO HERE * /}
http://stephen.io/mediaqueries /
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.
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/
这篇关于固定在ipad上的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
