Perfect Full Page Background Image

css-background-size.css

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

css-only-technique-1.css

img.bg {
  /* reglas para el background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Configura un escalado proporcional */
  width: 100%;
  height: auto;
	
  /* Configurar posicionamiento */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Específico para esta imagen en particular */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

css-only-technique-2.css

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

css-only-technique-2.html

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

jquery-method.css

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jquery-method.html

<img id="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: fixed; left: 0; top: 0" />

jquery-method.js

(function() {

var win = $(window);

win.resize(function() {
    
    var win_w = win.width(),
        win_h = win.height(),
        $bg    = $("#bg");

    // Cargue la imagen de fondo basado en el ancho de visualización, 
    // pero nunca cargar lo que sea más estrecho que lo que ya se ha cargado en todo caso.
    var available = [
      1024, 1280, 1366,
      1400, 1680, 1920,
      2560, 3840, 4860
    ];

    var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
    
    if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
      
      var chosen = available[available.length - 1];
      
      for (var i=0; i<available.length; i++) {
        if (available[i] >= win_w) {
          chosen = available[i];
          break;
        }
      }
      
      // Establezca una nueva imagen
      $bg.attr('src', '/img/bg/' + chosen + '.jpg');
      
      // para el testing...
      // console.log('Background escogido: ' + chosen);
      
    }

    // Determinar si la anchura o la altura debe ser de 100%
    if ((win_w / win_h) < ($bg.width() / $bg.height())) {
      $bg.css({height: '100%', width: 'auto'});
    } else {
      $bg.css({width: '100%', height: 'auto'});
    }
    
  }).resize();
  
})(jQuery);