Hintergrundgrafik in Ordnung auf Desktops, aber verzerrt auf Handys/Tablets

Question

Ich habe versucht, das Problem in den letzten paar Stunden herauszufinden, aber ich komme nirgendwohin und wäre dankbar, wenn erfahrene Leute mich in die richtige Richtung weisen könnten.

Die Hintergrundgrafik, die ich auf die Website gesetzt habe, ist gut, wenn man sie über einen Desktop betrachtet.

URL: http://test.paigroup.com

Wenn Sie auf der Website auf einem kleineren Gerät gehen dann ist der Hintergrund nicht richtig sitzen und aus irgendeinem Grund die ganze Seite nicht korrekt auf der Kontaktseite ausgerichtet sind.

http://test.paigroup.com/contact

Die CSS ich für den Hintergrund verwendet habe, ist:

body{ 
    background: url(../img/site/main-bg1.jpg) no-repeat center 130px; 
    background-size: 100%; 
    z-index: -1; 
    overflow-x: hidden; 

} 

body.microsite{ 
    background: url(../img/site/main-bg1.jpg) no-repeat top; 
    overflow-x: hidden; 
    background-size: 100%; 
    z-index: -1; 
} 

Vielen Dank im Voraus :-)

Answer 1

Fügen Sie einfach in Ihrem Körper Tag in css diese zweizeilige :

body{ 
display: flex; 
flex-direction: column; 
} 

And nicht vergessen zu verwenden