Parallax Hintergrundbild im Wrapper nicht reagierend

Question

Ich habe eine Website mit einer HTML5-Vorlage erstellt und angepasst. Bis jetzt hat alles gut funktioniert (abgesehen davon, dass es wahrscheinlich unordentliche Dateien gab).

Nun meine Frage:

I innerhalb eines Abschnitts-Elements einer Parallaxe Hintergrundbild benutzen und es ist auf mobiles nicht ansprechbar. Wenn ich die Größe meines Browserfensters ändere, funktioniert es einwandfrei. Aber wenn ich die tatsächliche Größe auf meinem Smartphone-Bildschirm anschaue, funktioniert es nicht.

Dies ist der Code, den ich in meiner CSS-Datei verwendet habe. Ich habe versucht, es mit Code, den ich in dieser Community gefunden habe, zu tun und es mit dem, was bereits in der Vorlage war, zu verbinden.

.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%; 
     } 

Dies ist das HTML-Element:

<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> 

Hier können Sie das Problem sehen können; das erste Header-Image funktioniert gut, alles andere nicht: http://lexadvice.de/leistungen.html

Wie kann ich dieses Problem lösen? Ich habe versucht, den Positionswert zu ändern, aber ich vermute, dass es etwas mit der width-Eigenschaft zu tun hat. Versuch und Irrtum haben mich diesmal nicht weit gebracht.

Answer 1

Einer der Medien Stilregeln überschreibt die background-attachment: fixed; in Datei: Leistungen-banner.css

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

, deshalb ist es nicht auf das mobile Arbeiten. Bitte beheben Sie das.

Alternativ können Sie hinzufügen und Inline-Regel background-attachment:fixed zu Ihrem # Banner-Element.

Siehe unten Screenshot (aus Chrom dev Tools genommen):

Answer 2

ich das Problem mit der Einstellung der Hintergrund auf Scroll gelöst. Jetzt werden die Bilder auf dem iPhone korrekt angezeigt.

background-attachment: scroll; 

Danke für Ihre Hilfe @Akash Shrivastava.