固定背景圖像不會調整大小以適應移動視口

Question

主頁的背景圖像不會縮小為我為移動視口准備的第二個主頁背景圖像。

在 Google / Firefox dev 上，該網站在移動視口上呈現良好，但是當我在實際手機上查看該網站時，主頁背景圖像顯得非常放大並且不會顯示替代圖像。

我試圖調整我的 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 上查看時，圖像會按比例縮小。