http://css-tricks.com/perfect-full-page-background-image/

 //HTML  //CSS #bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } 

O

 img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } } 

O

 //HTML  //CSS #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } //jQuery $(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); }); 

Una sugerencia acerca de la solución “background-size: cover”, debe colocarla después de la definición de “fondo”; de lo contrario, no funcionará, por ejemplo, esto no funcionará:

 html, body { height: 100%; background-size: cover; background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed; } 

http://jsfiddle.net/8XUjP/58/