Bild immer genau so hoch wie Browserfenster

mc_sr · 4. September 2017

Hallo zusammen,

ich habe nun schon öfter Webseiten gesehen, bei denen sich auf der Startseite ein Header-Image oder eine Slideshow befindet. Das besondere daran ist, dass das Bild oder die Slideshow immer genauso hoch wie mein Browserfenster ist. Wie kann ich sowas in HTML bzw. CSS umsetzten?

Gruß,

mc_sr

MrMurphy · 4. September 2017

Hallo

Die Bilder benötigen eine CSS-Anweisung, damit sie die volle Fensterhöhe erreichen. Das Vorgehen hängt dabei von der Webseite ab und ob es sich um Vordergrund- oder Hintergrundbilder handelt.

Gruss

MrMurphy

Axel · 4. September 2017

Läuft über CSS - hier ist CSS3 mit background-size: contain; und die weiteren Möglichenkeiten (siehe: https://www.html-seminar.de/bilder-bei-responsive-design.htm ) und für die volle Höhe dann mit Sticky Footer (siehe https://www.html-seminar.de/st…fussleiste-ganz-unten.htm ) gut.

mc_sr · 5. September 2017

Die Möglichkeit einem Bild in CSS die volle Browserhöhe mit 100% zu geben kenne ich. Was ich aber machen will, ist ein Bild oder einen Container immer so hoch sein lass wie das Browserfenster. Wenn man nun nach unten scrollt, scrollt das Bild oder der Container ganz normal nach oben weg.

Hier ein Beispiel was meine ich: https://www.red-agentur.de (Slideshow ganz oben auf jeder Seite; hat immer die volle Browserhöhe)

Wie ist das umsetzbar?

Bild immer genau so hoch wie Browserfenster

Jetzt mitmachen!

Teilen

Tags