title: Javascript images cover the full page
body: <p>I have below code that is a function for changing background-image every 10th second:</p>
  
  <pre><code>$(function() {
  var body = $(".home");
  var backgrounds = [
      "url(img/Agure.jpg)",
      "url(img/Arsenal1.jpg)",
      "url(img/ManUtd.jpg)",
      "url(img/stadion.jpg)",
  ];
  var current = 0;
  
  function nextBackground() {
      body.css(
          "background",
          backgrounds[current = ++current % backgrounds.length]);
      setTimeout(nextBackground, 10000);
  }
  setTimeout(nextBackground, 10000);
  body.css("background", backgrounds[0]);
  </code></pre>
  
  <p>The code works but I want the images always to cover the full page. Some images are to small to cover the full page so they just stack up next to each other. Any suggestions how I can change the code?</p>
  
  <p>HTML and CSS:</p>
  
  <pre><code>&lt;section class="home"&gt;
      &lt;div class="centered"&gt;
          &lt;div class="h-100 row align-items-center"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  .home {
      width: 100%;
      height: 100vh;
      background-position: center top;
      background-size: cover;
  }
  </code></pre>