Чтобы элегантно заполнить фон контейнера изображением произвольного размера, не обойтись без Яваскрипта.

Сперва положим тег img внутрь контейнера и спозиционируем его абсолютно. В случае фона для всей страницы получится примерно такой код:

<div id="background-container" 
  style="position: fixed; width: 100%; height: 100%; overflow: hidden;">
  <img id="background-image" width="1280" height="960" style="position: absolute;"
  src="background-image.jpg" />
</div>

Картинка всегда стремится занять всю площадь контейнера. Её ширина и высота всегда должны быть больше или равны ширине и высоте контейнера. При этом части картинки могут выходить за поля. Для этого добавим яваскриптовую математику для пересчёта размера и положения картинки внутри контейнера:

function cropToFit(image, imgWidth, imgHeight, 
    windowWidth, windowHeight) {
  var imgRatio = imgWidth / imgHeight;
  var windowRatio = windowWidth / windowHeight;

  var imgTop = 0, imgLeft = 0;

  if (imgRatio >= windowRatio) {
    imgHeight = windowHeight;
    imgWidth = Math.round((imgHeight) * imgRatio);
  } else {
    imgWidth = windowWidth;
    imgHeight = Math.round((imgWidth) / imgRatio);
  }

  if (imgWidth != windowWidth) {
    imgLeft = Math.round((windowWidth - imgWidth) / 2);
  }

  if (imgHeight != windowHeight) {
    imgTop = Math.round((windowHeight - imgHeight) / 2);
  }

  image.css({
    width: imgWidth,
    height: imgHeight,
    left: imgLeft,
    top: imgTop
  });
}

$(document).ready(
  function()
  {
    var image = $('#background-image');
    var imageWidth = image.attr('width');
    var imageHeight = image.attr('height');
    var $window = $(window);
     
    $window.resize(
      function()
      {
        var windowWidth = $window.width();
        var windowHeight = $window.height();
        cropToFit(image, imageWidth, imageHeight, 
          windowWidth, windowHeight);
      }
    );
    $window.resize();
  }
);
 

Всё в сборе, одним файлом.