view image details here Can anyone explain why my background image for the main game is displaying like this? I want to set it for the entire screen as I have different backgrounds planned for the menu of the game and the game itself. Any suggestions to make my work easier would be greatly appreciated. Thank you.
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Skranji', sans-serif;
}
/* Root Styles */
:root {
--background-main-game: url('../images/wowWP.jpg');
--background-main-menu: url('../images/gameMenu.jpg');
}
main {
height: 100vh;
}
/* Game Background */
.mainGameBackground {
background-image: var(--background-main-game);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
height: 100vh;
width: 100vh;
}<section class="mainGameBackground">
<!-- Game board -->
<div class="gameBoard">
<div class="mainBoard mt-0 mb-5 text-center mx-auto" id="mainGameBoard">
<span id="warriorTurn"></span>
<div class="square square1" style="border-left: 0; border-top: 0; margin-left: 15px;" id="0"></div>
<div class="square square2" style="border-top: 0" id="1"></div>
<div class="square square3" style="border-top: 0; border-right: 0;" id="2"></div>
<div class="square square4" style="border-left: 0; margin-left: 15px;" id="3"></div>
<div class="square square5" id="4"></div>
<div class="square square6" style="border-right: 0;" id="5"></div>
<div class="square square7" style="border-left: 0; border-bottom: 0; margin-left: 15px;" id="6"></div>
<div class="square square8" style="border-bottom: 0;" id="7"></div>
<div class="square square9" style="border-right: 0; border-bottom: 0;" id="8"></div>
</div>
<div class="d-md-flex">
<button class="btn d-block mb-4 m-md-1" id="playAgain">Play Again</button>
<button class="btn d-block ml-md-4 m-md-1" id="menuButton">Menu</button>
</div>
</div>
</section>