title: Background is not staying at full 100%
body: <p>Restricting the height of the body to 100% of the screen height is causing the background not to stay at full 100%</p>
  <p>How is that fixed. <a href="https://jsfiddle.net/3cgqpkrf/" rel="nofollow noreferrer">https://jsfiddle.net/3cgqpkrf/</a></p>
  <p><code>Background no-repeat;</code> is causing the background not to stay at 100%.</p>
  <p>Background attachment fixed has problems on mobile.</p>
  <p><a href="https://css-tricks.com/the-fixed-background-attachment-hack/" rel="nofollow noreferrer">https://css-tricks.com/the-fixed-background-attachment-hack/</a></p>
  <p>I think it may be able to be seen in the snippet I provided.</p>
  <pre><code>body {
    background: linear-gradient(45deg, #102eff, #d2379b);
    background-repeat: no-repeat;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hptBu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hptBu.png" alt="enter image description here" /></a></p>
  <p>Snippet Full Screen:
  <a href="https://i.stack.imgur.com/CksmK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CksmK.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const videoPlayer = (function makeVideoPlayer() {
    const config = {};
    let player = null;
  
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
    function onYouTubeIframeAPIReady() {
      const frameContainer = document.querySelector(".video");
      videoPlayer.addPlayer(frameContainer, config.playlist);
    }
  
    function shufflePlaylist(player) {
      player.setShuffle(true);
      player.playVideoAt(0);
      player.stopVideo();
    }
  
    function onPlayerReady(event) {
      player = event.target;
      player.setVolume(100); // percent
      shufflePlaylist(player);
    }
  
    function addPlayer(video, playlist) {
  
      const config = {
        height: 360,
        host: "https://www.youtube-nocookie.com",
        width: 640
      };
      config.playerVars = {
        autoplay: 0,
        cc_load_policy: 0,
        controls: 1,
        disablekb: 1,
        fs: 0,
        iv_load_policy: 3,
        loop: 1,
        playlist,
        rel: 0
      };
      config.events = {
        "onReady": onPlayerReady
      };
      player = new YT.Player(video, config);
  
    }
  
    function init(videos) {
      config.playlist = videos.join();
      window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    }
  
    return {
      addPlayer,
      init
    };
  }());
  
  videoPlayer.init([
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "CHahce95B1g",
    "2VwsvrPFr9w"
  ]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    background: linear-gradient(45deg, #102eff, #d2379b);
    background-repeat: no-repeat;
  }
  
  .container {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 100%;
    display: flex;
  }
  
  .curtain {
    flex: 1 0 0;
    margin: auto;
    max-width: 640px;
    position: relative;
  }
  
  .ratio-keeper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    margin: auto;
    overflow: hidden;
  }
  
  .video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: fade 10s ease-in 0s forwards;
  }
  
  @keyframes fade {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  iframe {
    user-select: none;
  }
  
  
  
  .hide {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="curtain"&gt;
      &lt;div class="ratio-keeper"&gt;
        &lt;div class="video video-frame"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>