Backstretch ohne JS

Die wenig bekannte, aber ultracoole CSS-Eigenschaft background-size:cover lässt sich hervorragend verwenden, um das unter Designern beliebte jQuery-Plugin Backstretch abzulösen.

Folgender Code ist nötig:

html {
height: 100%;
overflow-y: scroll;
}
body {
background-image: url('http://example.com/bild.jpg');
background-position: 50%;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}​

Ich habe einen direkten Vergleich im JSFiddle angelegt:

Wie das mit der Browserunterstützung genau aussieht, kann man im Quirksmode begutachten. Um eine Fallback-Lösung für Internet Explorer 6 bis 8 wird man in der Praxis wohl nicht herumkommen:

<!--[if lte IE 8]>
<script>
jQuery(function($){
$.backstretch("http://example.com/bild.jpg");
});
</script>
<![endif]-->

7 Kommentare

Stefan

Um nicht nur den IE zu betrachten sondern evtl. auch aeltere Firefox Versionen o.ae. das ganze per Modernizr & Yepnope nachladen.

http://adamjohnsondesign.com/blog/use-background-size-yepnope.js-and-modernizr-to-make-awesome-ful

Moe

Ich mach das immer mit einem <img> auf 100% width per CSS, ist ohne JavaScript und funktioniert überall

hans

@moe: aber bei einem responsive design stößt man da schnell an seine grenzen schätze ich. den IE kann man auch mit microsoft filtern bedienen … aber jquery ist auch ne gute idee. werde das mal testen, hab nämlich auch gerade so einen fall.

Clemens P

Ich benutze die selbe Methode wie Moe, aber ich werde euren Tipp mal beherzigen und schauen, ob es nicht vielleicht besser ist.

Gerrit

@Moe: Ich glaube nicht, dass du damit den vollen Backstretch-Effekt erzielst. Der geht auf volle Höhe und Breite, und zentriert das Bild so, dass das Seitenverhältnis beibehalten wird und alles geilâ„¢ ist.

Jann

Die Lösung sieht sehr interessant aus. Werde ich in den nächsten Webprojekten mal antesten.

oliver_w

Danke für die CSS3-Idee und den JSFiddle Vergleich.
Werde ich definitiv einmal bei einem der nächsten Projekte oder unserer Netzwerk Webseite umsetzen.
Bisher hatte ich immer auf Backstretch gesetzt.

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.