Umsetzung eines Layout

[Gandalf]

Hallo zusammen

Ich habe im Anhang einen Screenshot betreffend meiner Problematik angehängt.
Hätte gerne so etwas mit Contao umgesetzt. Bin mir aber im unklaren was es alles dazu braucht, um
das Bild beim öffnen des Fensters immer Browserfüllend darzustellen. Der Content sollte erst beim Scrollen oder nach Klick auf "Mehr Informationen" weiter unten erscheinen.

Ich hatte mal ein Beispiel welches ich leider nicht mehr auffindig machen kann.

Kann mir jemand mit Links, Tips usw. eventuell auf die Sprünge helfen?

Danke!

Gandalf

[do_while]

Hallo Gandalf,

dazu gibt es die sogenannte Fullscreen API

Näheres und Beispiele findest Du hier:
http://davidwalsh.name/fullscreen

[ctnew]

Hallo Gandalf,

wenn ich dich richtig verstehe, willst du auf der Startseite ein Fullscreen Background Image haben?
Falls ja, ist das mit CSS3 "background-size: cover;" relativ schnell zu lösen.

Gibt ja auch einige Erweiterungen dazu für Contao.

Ansonsten hier noch ein Link, wo verschiedene Techniken vorgestellt werden: http://css-tricks.com/perfect-full-p...kground-image/

[Gandalf]

@ctnew

Klar will ich ein Fullscreenbild haben.
Die Situation ist aber die, dass der untere Rand (je nach Höhe) des Bildes direkt an das Ende des Browser Viewports
grenzt. Dann erst beim Scrollen oder klicken auf den Button soll dass Bild nach oben verschwinden und der Inhalt
ersichtlich werden.

Anbei habe ich nun ein Beispiel (Parallax) gefunden, welches in die gewünschte Richtung geht.
Nur dass der Inhalt nicht überdeckt wird im beim Beispiel, sondern sich das Bild mit dem Inhalt nach ober verschiebt.
Hoffe ich habe es ein wenig verständlich erklärt.

[Bas]

Du musst den entsprechenden DIV mittels height:100% entsprechend aufsperren, aber achtung .. die 100% Höhe richten sich nach dem Elternelement, welches dann ebenfalls 100% Höhe zugewiesen werden muss ... bis hoch zum body-Element.
Und wenn der Background wie in Deinem Beispiel stehen bleiben soll: background-attachement:fixed

[ctnew]

Ok, dann hab ich dir mal hier ein schnelles Beispiel vorbereitet: Link/

Vielleicht hilft dir das ja weiter. Im Quelltext siehst du nötigen Angaben.

[Gandalf]

@ctnew
Vielen Dank für deine Bemühungen!

Nun habe ich verstanden.
Musste bei der Klasse ".img-container " einfach noch das "position: fixed;" entfernen. Nun funktioniert es wie gewünscht. Danke!