Kämpfen mit responsive Hintergrundbild

Question

Ich habe so viele Beiträge über responsive CSS-Hintergrundbilder gelesen, aber ich kann meine nicht machen.

Meine Website ist http://www.conn3cted.uk.tn/intManagement.html und ich versuche, das Bild als ein "Banner" verwenden, so kann die Höhe nicht zu groß haben.

Ich bin in der Lage, das Problem entweder auf Desktop oder Mobile zu beheben, aber sie wollen nicht zusammenarbeiten. Ich habe die vorgeschlagenen Lösungen (unten) benutzt, aber ich bekomme nicht das ganze Bild hoch/runter und es zeigt nur einen Teil davon oder viel Leerraum. Was mache ich falsch!?

.whatWeDo { 
    padding-top: 100px; 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height: 120px; 
} 

Answer 1

dieses css Dann nutzen Sie Medienanfragen Ihre margen ändern top für mobiles Gerät:

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    height: 100vh; 
    margin-top: 80px; 
} 

@media screen and (max-width: 878px) { 
    .whatWeDo { 
     margin-top: 170px; 
    } 
} 

Answer 2

diese CSS Versuchen mit ersetzen Ihre CSS:

Dies kann auch als Reaktion nur oben gesetzt, wie pro Sie benötigt:

.whatWeDo { 
    background-image: url("/images/intManagement/homePage/whatwedo.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    float: left; 
    height: 100%; 
    padding-top: 100px; 
    position: relative; 
    top: 80px; 
    width: 100%; 
}