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