Bootstrap3废墟手机整版背景

Question

我在我管理的站点上使用 Bootstrap 3 作为我的界面页面。我使用 CSS:

设置我的整页背景图片

background-image:url('/path/to/image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

效果很好...在桌面上。在移动设备上，图像被调整到非常小的分辨率，并被推到 bootstrap 3 面板上方。

Here is a picture。在桌面上，图片占满了整个页面。
这是 jsfiddle。

问题是，如果我删除 bootstrap 代码，效果会很好；例如，在另一个不使用 bootstrap 的页面上，使用了相同的 CSS。图片在桌面和移动设备上都能很好地缩放。

可能是什么问题？

谢谢

Answer 1

我不确定，但可能取决于您在移动设备上使用的浏览器 phone?

尝试添加：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

我可能是错的，但值得一试。

希望对您有所帮助。

Answer 2

终于用上了； <img src="/resources/ui_bg.jpg" style="width:100%;height:100%;position:absolute;top:0;left:0‌;z-index:-5000;" alt="">

谢谢大家！

Bootstrap3废墟手机整版背景

Bootstrap 3 ruins mobile full page background

html

css

mobile

twitter-bootstrap

responsive