Backstretch ohne JS / praegnanz.de

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 am 21. September 2012 #

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 am 25. September 2012 #

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

hans am 26. September 2012 #

@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 am 26. September 2012 #

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

Gerrit am 27. September 2012 #

@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 am 28. September 2012 #

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

oliver_w am 18. April 2013 #

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.

praegnanz.de – büro für intervernetzte medien