Struggling to adjust my body image so that it resizes based on the browser window. I have everything laid out on the page, but I want it to always fit the entire page without requiring scrolling. I attempted to use some javascript to solve the issue, but it wasn't successful so I removed it. However, I have left it in for your reference.
// function set_body_height() {
// $('body').height($("window").height());
// }
// $("window").ready(function() {
// $("window").bind('resize', set_body_height);
// });html{
background-color: black;
}
button {
font-size: 30px;
background-color:red;
text-decoration: none;
border-radius: 10px;
color: green;
position: absolute;
top: 80%;
left: 0;
}
h1 {
position: absolute;
top: 10%;
margin: 0 auto;
font-size: 5vw;
}
img {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
background-repeat: no-repeat;
/*background-position: center center;
background-attachment:fixed;*/
width: 100%;
position: absolute;
top: 0;
left: 0;
/*max-height: 99%;
max-width: 99%;
object-fit: contain;
background-repeat: no-repeat;
background-size: cover;
position: relative;*/
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MATT'S Running Game</title>
<link rel="stylesheet" href="styleIndex.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<img src="http://www.freevector.com/uploads/vector/preview/16619/FreeVector-Angry-Birds-Characters-1.jpg" />
<h1>Matt's Angry Bird Rip-Off Game</h1>
<button><a href="game.html" style="text-decoration:none">Start</a></button>
</body>
</html>