Css 包装器中的视差背景图像没有响应

我使用HTML5模板制作了一个网站，并对其进行了调整。到目前为止，一切正常（除了可能有凌乱的文件）

现在，我的问题是：

我在剖面元素中使用视差背景图像，在移动设备上没有响应。如果我调整浏览器窗口的大小，它可以正常工作。但如果我看一下智能手机屏幕上的实际尺寸，它就不起作用了

这是我在CSS文件中使用的代码。我试图用我在这个社区中找到的代码来完成它，并将它与模板中已有的代码合并

.wrapper.rechtsgebiete {
    background-color: #ffffff;
    color: rgba(255, 255, 255, 0.75);
    padding: 10em 0 6em 0 ;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    background-attachment: fixed;
    background-color: rgba(51,153,255, 0.80);
    background-image: url(../../images/la-rechtsgebiete.jpg);
    background-position: top left;
    background-size: cover;
    border: none;
    min-height: 50vh !important;
    position: relative;
    text-align: center;
    width: 100%;
        }

这是HTML元素：

    <section id="rechtsgebiete" class="wrapper rechtsgebiete" style="padding-top: 30vh; padding-bottom: 25vh;">
    <div class="inner"><center>
    <h1 class="font-volkhov2"><span style="color:white;">Services & Rechtsgebiete</span></h1></center>
    </div>
    </section>

服务与回收

在这里你可以看到问题；第一个标题图像可以正常工作，其他一切都不行：

我如何解决这个问题？

---

我尝试更改位置值，但我想这可能与width属性有关。这次尝试和错误并没有让我走得更远。

媒体风格规则之一是覆盖

后台附件：已修复在文件中：leistungen-banner.css

@media screen and (max-width: 1280px)
    #banner {
        padding: 6em 0 3em 0;
        background-attachment: scroll;
     }
}

这就是为什么它不能在手机上工作。请把它修好

或者，您可以将rule
后台附件：fixed
添加并内联到您的#banner元素中

请参阅以下屏幕截图（摘自chrome开发工具）：

我通过设置滚动背景解决了这个问题。现在图像在iPhone上正确显示

    background-attachment: scroll;

感谢您的帮助@Akash Shrivastava。
嗨，谢谢您的快速回答。我使用了内联方法，它现在在移动设备上看起来有所不同，但仍然不正确。是什么让手机上的图像如此之大？我会尝试截图。嗨，现在我在Leistungen页面上更改了它。有两张图片显示在右边，其他的没有。为什么会这样？