Ein Hallo in die Runde und im besonderen ein Hallo an die ProgrammierProfis unter euch :),

ich benötige dringend eure Hilfe, so langsam bin ich doch dezent verzweifelt, weil ich weder weiß woran es liegt, noch was ich noch machen kann.

Mein Problem: Das Hintergrundbild im oberen Bereich meiner Seite, welches man im Menüpunkt Design einstellen kann. Insgesamt sind es vier, die sich nacheinander abwechseln.

Meine Designvorlage: Zurich

Meine Seite: quadratimformat.de

Das Bild hat eine breite von 2000px und eine höhe von 698px (Das Problem bestand auch, als ich es ursprünglich mal kleiner drin hatte.)

Bei meiner Laptopauflösung von 1280x800px stellt er das Bild auch im ganzen da, so wie es sein sollte. Daher fiel es mir lange Zeit gar nicht auf, wie es scheinbar die meisten Menschen die ganze Zeit schon sahen.

Erst als ich mal bei jemand anderem auf einen 16:9 Bildschirm schaute (1900px breite), fiel ich ja glatt vom Stuhl, da sah das Headerbild extrem vergrößert aus, so das entweder das Logo unten abgeschnitten wurde oder gar nicht mehr zu sehen war (bei dem ersten Headerbild) oder das Logo zu weit oben in der rechten Ecke klebte (bei den anderen dreien). Nur wenn man den Browser kleiner zog, sah es dann irgendwann so aus, wie es sein sollte, was ich nicht verstehe, wenn das Bild doch eigentlich größer ist als die Auflösung des Bildschirmes. Die verschiedensten Browser stellen es auch wieder alle untersch. da XD.

Das ist für mich ein absolutes No Go und sieht gestalterisch total Banane aus.

Das es das Bild irgendwie größer skalieren muss ist ja irgendwie klar, wenn der Bildschirm auch größer ist, aber dafür ist doch das Bild eigentlich auch groß genug dachte ich.

Daher meine Frage: Wieso ist das so, das er quasi in das Bild reinzoomt, je größer die Auflösung ist und was muss ich tun? Ich schätze mal es ist irgendeine Einstellung im CSS aber davon habe ich keine Ahnung und hoffe auf eure Hilfe.

Eigentlich hatte ich mich mit dem Design schon sehr angefreundet, weil ich es mag wenn es über die ganze Seite geht, aber wenn das dann so ist, muss wohl etwas anderes her oder der Header wird weiß und es kommt nur ein Logo rein.

Bei der Handyvariante im Hochformat ist es auch grausam, wenn das Bild zu beiden Seiten abgeschnitten wird, wo ja eigentlich doch recht viele inzwischen über Handy die Seite anschauen und gar nicht mehr am Rechner. Das Menü wird ja leider auch nicht so dargestellt wie am Rechner, aber so ist das mit der Handoptimierung.

Sollte hier wer eine Lösung für mich haben, wäre es noch gut, wenn ihr mir für Nichtkenner noch sagt, wo ich den Code dann einfügen muss?
Ich schätze ja mal unter Einstellungen - Head bearbeiten - Gesamte Webseite? Bleibt der Code dann auch da stehen oder verschwindet der irgendwohin sobald man den abspeichert, den aktuell ist das Feld ja auch leer.

Vielen Dank schon einmal

Hallo Buttermann,

lieben Dank für deine Hilfe. :)

Das Logo hatte ich damals bewusst nicht in den dafür gedachten Bereich eingefügt, weil ich da das Logo gaube ich nicht auf die Höhe einfügen konnte wo es optisch am besten reingepasst hätte und es farblich ja auch nicht immer auf jedes Bild so passte, bei dem ersten Headerbild würde es auch gar nicht klappen, dann wäre es ja mitten über den Bildern :D

Ich fand es eben gerade bei dem ersten Bild recht erschreckend, wie groß das teilweise an manchen Bildschirmen gezogen wird. Ich denke du hast schon gesehen wie es im Original aussieht, das eigentlich noch einiges an Raum drumrum ist, was bei einigen so extrem rangezoomt wird das sogar schon die Bilder abgeschnitten werden , das kann so eben gar nicht bleiben.

Blöde Frage für Ahnungslose, was genau bewirkt der Code dann ?

Gibt es eine Möglichkeit, das sich die Seite links und rechts jeweils um eine weiße Fläche erweitert, je größer der Bildschirm ist und somit das Bild immer unberührt bleibt und sich nicht vergrößert?, dann geht es zwar nie mehr bis zum Rand aber wenigstens bleibt es dann so mit dem Logo erhalten, ich hoffe du verstehst wie ich das meine :D

so seh ich es und so sollte es aussehen.
Wenn der logobereich oben ist, wie kriegt ma das Logo dann unten eingefügt und dann noch weiter rechts als der vorhandene bereich eigentlich ist? :D

Denn wahrscheinlich würde ich dann die wechselnden Bilder weglassen und nur das Bild nehmen, da ich bei vier Bildern nicht ein Logo für alle nehmen kann, denn wenn der Himmel bei dem Foto weiß ist, sieht man schon die weiße Schrift nicht mehr usw.

was macht denn dieses important?

Ich habe jetzt das Bild mit den mehreren s/w Bildern in den Text eingefügt, da weiß ich wenigstens, das es sich nicht mehr wahllos wo abschneiden lässt :D

im Header habe ich nur noch zwei Bilder genommen, bei denen es nicht so schlimm ist wenn er die hochskaliert und das Logo in den dafür gedachten Bereich eingefügt, gefällt mir jetzt zwar alles nicht mehr so aber da muss man sich anpassen :)

Eine Frage habe ich noch, was kann man denn machen, damit der untere dunkle Bereich, wo Impressum und Co drinsteht nicht so hoch ist, sondern mindestens um die hälfte niedriger?