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