function getDocHeight() {
  var D = document;
  return Math.max(D.body.scrollHeight, D.body.offsetHeight, D.body.clientHeight);
}

function getDocWidth() {
  var D = document;
  return Math.max(D.body.scrollWidth, D.body.offsetWidth, D.body.clientWidth);
}

function bgFit() {
  var wrap = document.getElementById('wrapper');
  var bg = document.getElementById('bg');
  var img = document.getElementById('bgimage');
  
  var bgW = bg.offsetWidth;
  var bgH = bg.offsetHeight;
  var imgW = img.offsetWidth;
  var imgH = img.offsetHeight;
  var docW = getDocWidth();
  var docH = getDocHeight();

  // step1: fits background container to the viewport
  // in case that viewport is larger than 1280x1024 px
  if (docW > bgW) {bg.style.width = docW + 'px'; wrap.style.width = docW + 'px';}
  if (docH > bgH) {bg.style.height = docH + 'px'; wrap.style.height = docH + 'px';}

  // step2: fits smaller background image to the background container proportionally
  // larger image is cropped (css overflow: hidden)
  bgW = bg.offsetWidth;
  bgH = bg.offsetHeight;
  if (bgW > imgW) {img.style.width = bgW + 'px';}
  else {if (bgH > imgH) {img.style.height = bgH + 'px';}}
}
window.onresize = bgFit;