leere div mit background füllen, funktioniert nicht

Hey Leute,
mein Problem ist ziemlich simpel und trotzdem kriege ich es nicht hin auch nicht nach längerem googeln.
Und zwar:
mein html hat 1 div in der noch eine div ist.
Die erste ist mit etwas text gefüllt wie in diesem beispiel, die zweite (header) ist leer.

<div id="content_wrapper">    
      <div id="header">     
      </div>
      <p>bla bla bla bla bla bla bla</p>
</div>

jetzt möchte ich in die header div einen background machen.
der soll 100% der zulässigen maximalen größe haben.
so sieht mein css aus.

#content_wrapper {   
    max-width: 1400px;
    margin: auto;
    border: solid 1px black;
}




#header {
    background-image: url(banner.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

So nun geht das ganze aber nicht -.- die größe des divs passt sich nicht dem background an.
Was kann ich da tun ?

Danke im Voraus

hab ich schon versucht, dann geht es natürlich nur das bild passt sich bei der größe nicht automatisch an wenn ich das fenster kleiner ziehe.
Lege dabei viel wert auf responsive design.
wenn ich dem header height: 100% gebe nimmt er 0 -.-

- - - Aktualisiert - - -

Übrigens habe ich noch ne alte seite rumliegen bei der ich das vor ca. 1,5 Jahren so gemacht habe und es hat funktioniert.
Versuche die Seite jetzt zu öffnen und es geht nicht mehr.
Hat sich da was allgemein geändert oder wie kommt das aufeinmal O.o

Habe das Problem gelöst, indem ich das Bild nicht über css als background hinzufüge sondern in die div in html als img tag.
Dann nur über css max-width: 100%; height: auto;

Ich denke für die meisten Leute, die sich damit öfters beschäftigen, bekannt.
Wirkliche Hilfe hab ich hier nicht bekommen. Schlechtes Forum, sorry.