Header-Image macht Probleme...

Hallo Zusammen,

bin grad dabei meine Homepage zu gestalten, bin schon realtiv weit gekommen und quäle mich jetzt schon 2 ganze Tage mit dem Header ab,
ich weiß nicht wieso das Header-Bild sich nicht an die Navbar anknüpft wenn ich die Seite über mein iPhone oder meinem Laptop aufrufe,
es entsteht ein Raum den ich nicht unbedingt haben möchte.

Hier ein Screenshot zum verdeutlichen: http://img5.fotos-hochladen.net/uploads/39edo4q2vwl.jpg

https://alfahosting.de/hideref.php?u=…39edo4q2vwl.jpg

Um diese Seite geht es:
http://test-66838.alfa3044.alfahosting-server.de/

Wie werde ich diesen Raum los, sodass wenn ich die Seite über mein Smartphone oder Laptop aufrufe, das Bild an die Navbar anknüpft?
Ich verwende das Twenty-thirteen Theme wenn das hilft.

Muss dazu sagen dass ich mich erst eine Woche mit dem Thema css, codes, html befasse - bin daher absoluter Anfänger...

Gruß

Zitat von Nevery

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.

Hallo Nevery,

danke für deine Antwort!
Ich denke Variante A wäre am optimalsten.
Wie binde ich das Foto direkt ein - hast du eine Schritt für Schritt Anleitung ? Welche Programm brauche ich für diesen Vorgang?

Vielen Dank
Gruß

Julian