Backstretch ohne JS

21. September 2012

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.

praegnanz.de