There are several techniques for getting an image to occupy the full width and height of the screen. Each technique is considered appropriate for a given scenario as we can handle the problem via JavaScript, CSS or server side.

In this answer solutions make use of JavaScript with jQuery feature.

jQuery

Image depending on screen width

This plugin works the way that you indicate in the question, ie it makes use of several images loading the most appropriate according to the width of the screen:

(function() {

var win = $(window);

win.resize(function() {

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

    // Carregar imagem de fundo mais estreita com base na
    // largura do ecrã, mas nunca carregar nada mais estreito
    // do que o que já está carregado, se alguma coisa estiver.
    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;
        }
      }

      // Definir a nova imagem
      $bg.attr('src', '/img/bg/' + chosen + '.jpg');

      // para testar...
      // console.log('Chosen background: ' + chosen);

    }

    // Determinar se a largura ou a altura deve 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);

Code removed from the CSS-Tricks website in this article:

Perfect Full Page Background Image | CSS-Tricks

Vegas Background jQuery Plugin

Very easy to use, it allows us to transform a simple <img/> into an image to occupy 100% X 100% of the screen, as well as to indicate the image in the PlugIn :

<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>

<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />

$(function() {
  $.vegas({
    src:'/images/background.jpg'
  });
});

You can do this with CSS as follows: link

#banner{
    background:url('https://dq197.infusionsoft.com/Download?Id=2300') no-repeat;
    background-size:contain;
    width:100%;
    height:260px;
}

The value contain (English) in the background-size property allows:

  

This keyword specifies that the background image should be sized to be as large as possible, while ensuring that its dimensions are less than or equal to the corresponding dimensions of the background positioning zone.

You can do it by CSS like this:

body {
    background: url(caminho_para_a_imagem);
    background-size: cover;
}

cover: Resizes the image to completely fill the background area, maintaining the aspect ratio.

If you do not care about the ratio, you can use:

body {
    background: url(caminho_para_a_imagem);
    background-size: 100% 100%;
}

There are other parameters , choose the one that best suits your needs.