experiment_zoo/full_cover.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Full Cover Background</title>
<style>
body {
    background-image: url(background_images/images/ACC.jpg);
    background-size: cover;
}
h1, footer {
    text-align: center;
}
footer>a, footer>a:visited {
    text-decoration: none;
    color: #555;
}
</style>
<script>
let message = "This is my message! It was created with let,";

function init() {
  var loc = window.location.href;
  var HTMLvalidLinkStr = 'http://validator.w3.org/check?uri=' + loc;
  var CSSvalidLinkStr = 'http://jigsaw.w3.org/css-validator/validator?uri=' +
                        loc + '?profile=css3';
  document.getElementById("vLink1").setAttribute("href", HTMLvalidLinkStr);
  document.getElementById("vLink2").setAttribute("href", CSSvalidLinkStr);
  message += " and I'm accessing it globally. Go it?";
  alert(message);
  // document.write(message);
  document.getElementById("main").innerHTML = message;
}
window.onload = init;
</script>
</head>
<body>
<h1>Full Cover Background</h1>

<main id="main">
</main>

<footer>
<a id="vLink1"><strong> HTML </strong> Valid! </a> |
<a id="vLink2"><strong> CSS </strong> Valid! </a>
</footer>
</body>
</html>