Websites im WD 9 Premium immer im gleichen Abstand zum oberen Rand des Browsers

MTB-TiGer schrieb am 14.04.2014 um 01:10 Uhr

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

Kommentare

Mango schrieb am 14.04.2014 um 08:52 Uhr

ich habe zwar nicht so einen tollen hintergrund, der sich verkleinert und dem browserfenster anpasst, aber ich habe die von mir gebaute webseite auch so angelegt, dass der hintergrund stehen bleibt und sich alles "unterhalb" abspielt, auch wenn man den seiteninhalt scrollt. siehe hier >>  im prinzip mit einem kleinen trick: ich habe die page-background-ebene (rechteck) 100% transparent gemacht und ein sichtbares rechteck davor gelegt und dieses weiter unten platziert so das alles darüber platz hat, was man sehen soll (navi, himmel vom hintergrund, titel, etc) also deine köpfe der band würde man mit dieser variante auch sehen. vielleicht hilft dir das weiter?

MTB-TiGer schrieb am 21.04.2014 um 22:20 Uhr

Hallo Mango,

vielen Dank für Deine Idee. Es ist zwar nicht ganz das, was ich gesucht habe aber ich habe es jetzt trotzdem so ähnlich umgesetzt wie Du und deshalb danke ich Dir für die Idee.

Ich habe die Seite dupliziert und die duplizierte Seite dann via "div" in den html-body der eigentlichen Seite Implementiert und anschließend alles Sichtbare auf der Seite entfernt und den Hintergrund transparent gemacht.

Es war zwar ein bisschen mehr Arbeit als ursprünglich geplant, aber ich habe erreicht, was ich erreichen wollte.

Das Ergebnis kannst Du hier sehen.

Nochmals vielen Dank.

Gruß

Timo