[SOLVED] Background in standard mode not acting as expected?

Background in standard mode not acting as expected?

I am using a Google Chrome extension to replace the default new tab page. One of the things I'm doing with it is randomly changing the background image every time I open newtab. The way my CSS and HTML is now, the background fills the whole page.

However, at one point I noticed the console alert that I was using quirks mode. When I added <DOCTYPE html> to newtab.html, the background now fits to width, but not height. My code is included below. Note: some HTML is removed for personal privacy reasons. Note: I had to change newtab.js to add randBetween, I previously had that in a different file under a different name. Also, although the snippet looks fine, note that on newtab the page continues under the background image as whitespace. Also, .tile img content properties are set in a separate file (icons.css).

How do I extend the background to the bottom of the page (without stretching)? If this isn't possible, will leaving it in quirks mode have any ill affects?

// newtab.js

function randBetween(low, high) {
  if (!(low > high)) {
    low = Math.ceil(low);
    high = Math.floor(high)
    return Math.floor(Math.random() * (high - low + 1)) + low;
  } else {
    console.error("Error: low must be less than high in randBetween.")
    return 0
  }
}

var bgs = [
  "https://lh6.googleusercontent.com/proxy/Z0waqwSd3EH7Ot83HrSRk2FfIAM5Dy1oxGZKa8uu31fEL5NH_Jpv6nI8IHd0Y1lFq5xujIdvPRO4g6PXo-k2LFJSsB_YZBQz2A=w3840-h2160-p-k-no-nd-mv",
  "https://compass-ssl.xbox.com/assets/94/d0/94d0f456-a14c-4895-ad51-e631990442d9.jpg?n=Minecraft_Sneaky-Slider-1084_Nether_1600x675.jpg",
  "https://preview.redd.it/11zl4x2k2tr61.png?width=1920&format=png&auto=webp&s=91a718d1af1617baa146a534cec328befe2e0af8",
  "https://whatifgaming.com/wp-content/uploads/2021/08/Glowing-Ores-3-1024x576.png",
  "https://i.imgur.com/RAIgYUI.png"
];

var randomBg = bgs[randBetween(0, bgs.length - 1)]

document.body.style.backgroundImage = 'url("' + randomBg + '")'

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('extensions').addEventListener('click', function() {
    chrome.tabs.update({
      url: 'chrome://extensions'
    });
  });
});

/* newtab.css */

body {
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 95%;
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: #30353d;
  color: white;
  opacity: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
}

.tile:hover {
  opacity: 85%;
}

.tile img {
  width: 50px;
  height: 50px;
  margin: 5px;
}

.tile#extensions {
  cursor: pointer;
}

h2 {
  color: white;
  text-align: center;
}

hr {
  width: 100%;
}

<html>

<head>
  <title>New Tab</title>
  <link rel="icon" href="http://assets.stickpng.com/images/588525cd6f293bbfae451a37.png">
  <link rel="stylesheet" href="newtab.css">
  <link rel="stylesheet" href="icons.css">
</head>

<body>
  <div id="main">
    <h2>Coding</h2>
    <div class="links-container" id="coding">
      <a class="tile" href="https://github.com"><img data-site="github">GitHub</a>
      <a class="tile" href="https://stackoverflow.com"><img data-site="stackoverflow">StackOverflow</a>
      <a class="tile" id="extensions"><img data-site="googledocs">Extensions</a>
    </div>
  </div>
  <script src="newtab.js"></script>
</body>

</html>

Solution

It turns out I needed to set the height of the body element in vh instead of %.

(Thanks @astombaugh)