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:

• mit jQuery-Backstretch
• mit reinem CSS

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