Landingpage: Resizeable fullscreenimage

[Ccenter]

Hallo,

Ich versuche für meine Webseite folgendes zu realisieren: Wird die Seite aufgerufen, soll Viewport-füllend ein Bild angezeigt werden. Sobald einmal gescrollt wird, verschiebt sich jedoch das Bild. Es soll also kein statischer Hintergrund des Bodys sein.
Diese Seite verdeutlicht sehr gut wie ich das machen möchte: Sailing Collective

Ich denke mal, dass das nicht ausschließlich mit HTML/CSS zu realisieren ist. Wird das Bild per CSS gesetzt, wird immer ein HTML-Element benötigt, welches exakt der Viewport-Größe entspricht, damit das Bild auch beim Resizen Viewport-füllend bleibt. Da man scrollen können soll, fällt auch position:fixed weg.

Ich habe das jetzt ersteinmal so gelöst, dass per jQuery immer ein Div an die Viewportgröße angepasst wird. Das funktioniert auch soweit ganz gut. Wird die Browsergröße verändert, passt sich das Bild an.

html:

 <section class="titleImage">
        <div class="imageSizer" style="text-align: center;">
              <span class="borderedText" >Willkommen</span>
       </div>
</section>

javascript:

$(".imageSizer").height($(window).height()).width($(window).width());

Ich denke, dass das hier aber auch nicht das Wahre ist, denn der span bleibt beim resizen des Browsers nicht mittig sondern bleibt an der Stelle an der er das erste Mal generiert wurde. Außerdem, und das ist das größte Problem: Vergrößern des Fensters ist kein Problem, verkleinert man es jedoch, entsteht unten ein Scrollbalken, der, wenn man ganz nach rechts scrollt, einfach ins Weiß führt.

Somit: Wie macht man das richtig? Wie haben die das auf der Beispielseite gemacht?

 

[SteelWheel]

Moinsen und Willkommen hier bei jsWelt! Darf ich mich kurz vorstellen? Ich bin der Überkoffeinierte - ich trete immer dann in Erscheinung, wenn irgendwo einer an einem Sack Kaffeebohnen gerubbelt hat und der Duft mich dann quasi anlockt ... !

Da ich kürzlich genau das ebenfalls gemacht habe (aber auch schon mehrmals), empfehle ich Dir die reine CSS Lösung - vielleicht mit ein wenig "media queries".

Was Du suchst nennst sich "cover" im CSS. Hierbei gibst Du einem Background-Image entsprechende Attribute mit, wodurch das Bild vollübergreifend wie bildschirmfüllend (auch skalierend) dargestellt wird. Mit den "media queries" (optional) lässt sich dann für kleinere Auflösungen ein anderes Verhalten realisieren (wie bspw. sich das Hintergrundbild bei kleineren Auflösungen verhält; ob es bspw. scrollt).

Wichtig dabei: Alle Browser haben die gleichen Startbedingungen - hier fällt schnell der Begriff "Init". Hierbei werden für alle Browser die Standardformatierungen zurückgesetzt und durch eigene ersetzt. Was aufwendig klingt, liegt gratis im Web: z. B. hier - falls Du den Grund nicht verstehst, warum man das macht, frag nach! (vorweg sonst noch: h1, margins, paddings usw. sehen in den Browser unterschiedlich aus; wir wollen ja x-browser-konform arbeiten, oder?)

So ... nachdem Du also Dein "Init" gemacht hast, sind ein paar "Basics" vorweg nötig - wieder nur CSS:

html, body { width:auto; height: 100%; }

Ich habe mich dann gezielt für das html-Tag entschieden und dort meinen Background platziert. Das klappt in allen aktuellen Desktop-Browsern sowie auf meinem schrottreifen Android 2.1 Standardbrowser eines Sony Xperia mini ... Heißt: Dieses neumodische NSA-Spielzeug kann es mit Sicherheit!

html { 
	background: url(HIER_STEHT_DEIN_BILD) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Das ist es eigentlich schon und damit kein Hexenwerk. ABER Deine eigentliche Seite bekommt noch ein paar Angaben in den METATAG-Bereich ... das ist WICHTIG! Hier der Auszug der Dinge, die Du benötigen wirst:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Wichtig sind da eigentlich nur die letzten vier (nämlich für den Mobilgerät-Sektor - und den solltest Du im eigenen Interesse und von Google, SERPS, SEO & Co. supporten!) - ich habe aber gezielt und extra nochmal die ersten beiden mit eingepackt ... (damit Du das nicht vergisst, dass es da noch mehr gibt)

Wenn ich darf, verlinke ich meine jüngste Realisierung auf diese Weise - da siehste es dann im Einsatz (der User "mikdoe" ist hier immer ganz wild auf URL-Prüfung; jetzt erspare ich ihm eine denkbare Entnahme aus meinem Beitrag! ^^). Und: Google findet es - nachweislich - geil!

Und wie Du siehst: Ganz ohne JavaScript, Framework, weitere Requests und Fullsupport für Anti-JavaScript-Surfer.

Grüße ... und zwar vom heiligen Elixier der frisch gemahlenen, kolumbianischen Koffeinknospe!