Header Hintergrundbild responsive machen

Ich habe im Header ein Hintergrundbild. der Header wurde dazu angepasst in der Höhe. Das Bild ist 624px hoch, der Header wurde auf 844px gesetzt, somit ist die Navigation über dem Bild.
Alles chic.
Jetzt möchte ich genau dasselbe für Tablet und Landscape, aber das funktioniert nicht.
Das ist mein CSS Code - der obere Abschnitt stand schon da, meiner ist ab #header.navbar

Die Breite stimmt dann von den Bildern, aber die Höhe nicht. Da ist dann oben und unten jede Menge nix.

Code:

@media (min-width: $grid-float-breakpoint) {
    .navbar-categories {
        background-color: transparent;
        .navbar-nav {
            @include border-radius(5px);
        }
    }
    #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
        color: #fff;
        text-shadow: 1px 1px 3px #000;
    }
    #header.sticky {
        #cart-container.navbar-cart > ul > li > a.dropdown-toggle {
            color: $text-color;
            text-shadow: none;
        }
    }
   
}

#header.navbar {
          background-image: url(assets/images/custom/header_hintergrund_mit-Text.jpg);
          max-width: 100%;         
          background-repeat: no-repeat;
        background-size: contain;
          
      }

@media (max-width: @screen-xs-max) {
 
  #header.navbar {
          background-image: url(assets/images/custom/header_hintergrund_768.jpg);
          max-width: 100%;        
          background-repeat: no-repeat;
        background-size: contain;
          
      }
  }