title: background-repeat: no-repeat; is not working
body: <p>Restricting the height of the body to 100% of the screen height you will see background-repeat: no-repeat; not working.</p>
  <p>How is, or would this be fixed in the code? <a href="https://jsfiddle.net/z3gq0y5x/" rel="nofollow noreferrer">https://jsfiddle.net/z3gq0y5x/</a></p>
  <p>Why is the background still repeating?</p>
  <p>How would that be fixed in the code?</p>
  <p>I am using <code>background-repeat: no-repeat;</code> yet that is not working in the code.</p>
  <pre><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body::before {
    content: &quot;&quot;;
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  
  .bg1 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .bg2 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .bg3 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Te2rB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Te2rB.png" alt="enter image description here" /></a></p>
  <p>It can also be seen in the snippet I provided.</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>(function randomBackground() {
    const classNames = [
      "bg1",
      "bg2",
      "bg3"
    ];
  
    const random = Math.floor(Math.random() * classNames.length);
    document.querySelector("body").classList.add(classNames[random]);
  }());
  
  
  
  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([
    "CHahce95B1g",
    "CHahce95B1g",
    "CHahce95B1g",
    "CHahce95B1g"
  ]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body::before {
    content: "";
    background-repeat: no-repeat;
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  
  .bg1 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .bg2 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .bg3 {
    background-image: linear-gradient(45deg, #102eff, #d2379b);
  }
  
  .outer {
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 100%;
  }
  
  .tcell {
    display: table-cell;
    vertical-align: middle;
    padding: 8px 8px;
  }
  
  .video-wrapper {
    position: relative;
    margin: auto;
    max-width: 640px;
  }
  
  .ratio-keeper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    margin: auto;
  }
  
  .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="outer"&gt;
    &lt;div class="tcell"&gt;
      &lt;div class="video-wrapper"&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;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/W57de.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W57de.png" alt="enter image description here" /></a></p>
  <p><strong>The answer below gives me this:</strong></p>
  <p><a href="https://i.stack.imgur.com/J1oA8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J1oA8.png" alt="enter image description here" /></a></p>
  <p>2nd updated answer provided:</p>
  <p>The updated answer causes the video to no-longer be centered in the middle.</p>
  <p>The video was originally centered in the middle in the question I posted.</p>
  <p>The answer that was provided messed that up.</p>
  <p><strong>Seen Here:</strong>
  <a href="https://i.stack.imgur.com/03xRH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/03xRH.png" alt="enter image description here" /></a></p>