Header-Image macht Probleme...

Das ist simpel erklärt: das Bild wird als background-image verwendet und steht auf 100%, was soviel bedeutet wie "zeige es immer komplett an". Wenn die Seite nun dank geringerer Bildschirmauflösung des Laptops schmaler wird, skaliert sich das Bild entsprechend und verliert mit der Breite auch an Höhe, was sich in diesem scheinbaren Abstand äussert (korrekt formuliert würde es heissen: in diesem nicht mehr vom Hintergrundbild bedeckten Bereich).

Prinzipiell gibts zwei Möglichkeiten: a) das Bild nicht als Hintergrundbild verwenden, sondern direkt einblenden - dann könnte sich mit ein paar weiteren Änderungen die Höhe des Kopfbereichs an das Bild anpassen und der Abstand wäre verschwunden. Dafür brauchst du PHP, HTML und CSS.
b) Du änderst die Angabe für die Größe des Hintergrundbildes (nachzulesen hier: http://www.w3schools.com/cssref/css3_pr_background-size.asp) - wenn Du die auf "cover" setzt wird der Hintergrundbereich immer gefüllt, allerdings werden Teile des Bildes abgeschnitten und schon bei großer Auflösung verschwindet ein Teil des Bildes hinter der Menüleiste, es wird also "rangezoomt" und erscheint damit pixelig, dafür sollte man es etwas höher machen. Bräuchtest Du nur CSS für.