固定的背景图像不会调整大小以适应移动视口

Question

主页的背景图像不会缩小为我为移动查看端口准备的第二个主页背景图像。

在谷歌/火狐开发版上，网站在移动查看端口上显示良好，但当我在实际手机上查看网站时，主页背景图像会放大，不会显示替代图像。

我试着调整我的CSS和重新调整我的HTML，但没有成功，问题仍然存在。

我会把HTML和CSS的片段留到网站的链接上征求意见。

#section-section1 {
background-image: url("../images/section-1-background.png");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
}
#section-section1 {
background-image: url("../images/section-1-background-mobile2.png");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
height: 100%;
width: auto;
}

<section data-role="section" id="section-section1">
<div class="section-1-text">
<h1>
<span style="font-weight: 400;">STYLE 101:</span><br />A HISTORY<br />OF
TARTAN FASHION
</h1>
<button id="slide" type="button">
<a href="#section-section2"><p>START</p></a>
</button>
<p class="section-1-p">Scroll down or drag sideways</p>
</div>
</section>

网站链接：http://www.07715414453.uk/

Answer 1

当我从所有背景图像中删除以下CSS规则时：

"背景附件：固定">

当在iPhone上观看时，图像会缩小。