我的固定背景无法在移动设备上正确显示答案

【问题标题】：My fixed backgrounds arent showing properly on mobile devices我的固定背景无法在移动设备上正确显示
【发布时间】：2015-11-10 19:35:32
【问题描述】：

还是有问题。我在上一篇文章中被标记为不够具体，所以让我试着更具体一些。我找不到将我的设计转换为我的 iPhone 6 的方法。我一直在使用各种媒体查询，响应式设计在 Firefox 和 Chrome 的“检查元素”中工作。当我在 iPhone 6 上打开它时，它看起来像这样。

我的目标是让它看起来更接近这个：

这是网站： http://mattvwhittle.com/WeddingWebsite/index.html

这是我在 HTML 元标记中写的：
元字符集="utf-8"
meta name='viewport' content="width=device-width,
初始比例=1，最大比例=1，最小比例=1，用户可缩放=否“
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 元名称="HandheldFriendly" 内容="真"

这是我写的关于此事的媒体查询：

@media only screen and (max-width: 480px) {
.fixed-bg {
    position: relative;
    background-size: auto contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
}

我是媒体查询的新手，但我尝试过：

background-size: auto 100%;
background-size: 100% auto;
background-size: 100%;
background-size: conain;

这些都没有达到预期的效果。任何帮助将不胜感激。谢谢你。

【问题讨论】：

新开发。在 androids 上运行良好......只是不是 iPhones

标签： html css

【解决方案1】：

试试这个 - 你不应该需要background-size:100%，甚至不需要媒体查询来处理背景图像。 CSS3 background-size:cover 属性可以很好地处理这个问题。适用于所有移动设备；

body {
    background-color: #000; 
    background-image: url(yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

【讨论】：

封面似乎不起作用。我不知道这是否重要，但我正在使用固定和滚动背景主题之间的交替。如果它有助于查看我所有的 HTML 和 CSS 从这个站点中提取它：mattvwhittle.com/WeddingWebsite/index.html

【解决方案2】：

背景附件：固定；不适用于 iOS 这也不是最佳实践。我有点让它在我的网站上工作，但如果有人在网站构建的早期偶然发现这个，不要这样做！！！

【讨论】：