praegnanz.de büro für intervernetzte medien

Gerrit, 21.09.2012

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

  1. 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

  2. Moe am 25. September 2012 #

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

  3. 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.

  4. 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.

  5. 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.

  6. Jann am 28. September 2012 #

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

  7. 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.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.