Hallo,
ich habe folgendes Problem, für welches ich eine Lösung suche.
Ich habe den Hintergrund meiner Website so angelegt, dass das Bild immer das Komplette Browserfenster ausfüllt, egal, wie groß der Bildschirm ist (fullscreen). Dazu habe ich diesen Code:
---------------------------------------------------------------------------------------------------------------------
<style type="text/css">
html {
background: url(index_htm_files/hintergrund.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
--------------------------------------------------------------------------------------------------------------------------------
in den <body> der Site eigefügt.
Dann habe ich die Navigation auf der Site so gestaltet, dass sie von einer bestimmten Position bis zum Browserrand mitscrollt und dann dort fixiert ist, während die Seite weiterscrollt (siehe hier).
Soweit ist alles super!
Jetzt ist es so, dass der Hintergrund sich dem Bildschirm anpasst, die Website selbst aber natürlich in der festgelegten Größe angezeigt wird und auch die angegebene y-Position, bei mir 250px, beibehalten wird.
Das Problem ist nun, dass sich der Hintergrund je nach Bildschirmgröße und Bildschirmaflösung natürlich wie beablichtigt ändert, und die Site dann nach oben Teile des Hintergrund verdeckt, die eigentlich zu sehen sein sollten (in diesem Fall die Köpfer von Bandmitgliedern).
Kann ich den TOP-Abstand, also den Y-Wert so definieren, dass der Abstand immer dem Hintergrund entspricht, also so, dass die Köpfe immer zu sehen sind? Z.B. durch eine Abstand-Angabe in %?
Zu der betreffenden Website geht es hier, damit ihr euch ein Bild machen könnt.
Ich hoffe, dass ihr mir helfen könnt.
Gruß Timo