移动设备上的背景图像问题

Question

我有一个网站，其中包含使用背景图像的英雄部分。为了针对移动设备优化网站，我使用 CSS 媒体查询专门为移动屏幕设置了不同的背景图像。当我在 Chrome 开发者工具中使用移动视图测试网站时，它看起来是正确的。但是，当我在真实的移动设备（例如 iPhone 14 Pro Max）上查看时，背景图像无法正常显示。

这是我的 HTML 和 CSS 代码：

`<section id="hero">
    <div class="container">
        <div class="hero-content">
            <h1 class="main-title ani-fade-up">ADER BOYA</h1>
            <p class="main-slogan ani-delay ani-fade-up">Projelerinizi Gerçekleştirelim Renginizi Keşfedin!</p>
            <div class="arrows ani-delay2 ani-fade-up">
                <a href="#">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </div>
        </div>
    </div>
</section>`

`/* Hero Section */
#hero {
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/heroback.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

/* Media Queries */
@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(/img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}`


Github links:
https://github.com/Codekod/aderboya

I've included different background images for mobile devices using media queries, and it looks fine in Chrome DevTools. What could be causing the issue when viewed on real mobile devices like the iPhone 14 Pro Max? Is there something I'm missing in my CSS or HTML?

Answer 1

代码中有一个小但常见的错误；文件路径指定不正确。您可以参考本教程：https://www.youtube.com/watch?v=P6UgYq3J3Qs&ab_channel=KevinPowell。 尽管部署了您的项目，但桌面版本中也指示了不正确的路径。这些是正确的路径。

#hero {
width: 100%;
background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(../img/ader/heroback.jpg);
background-size: cover;
background-attachment: fixed;
position: relative;

}

@media only screen and (max-width: 580px) and (min-width: 248px) {
    #hero {
        background: linear-gradient(0deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.2)), url(../img/ader/mobileback3.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-attachment: fixed;
    }
}