HTML/CSS 背景图像在 Safari 中无法缩放

Question

我在 Safari（尤其是 iPhone）中的背景图像缩放时遇到问题。

这是它在 iPhone 上的外观：

它应该是这样的（至少）：

这是 CSS 代码：

#home {
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
text-align: center;}

img {
vertical-align: middle;
max-width: 100%;
height: auto; }

我忘了提到“家”是<section> 标签的“id”。我们的想法是为此“#home”<section> 使用图像背景。

Answer 1

我没有 safari，试试看：

#home {
    height: 500px;
    background-color: rgba(0,0,0, .5);
    background-image: url(../img/header-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    position: relative;
    text-align: center;
}