我想为我创建的这个简单游戏设置背景图像，但不知道如何使图像居中于输入屏幕并覆盖所有页面的高度和宽度。我还希望图像成为背景，这样游戏就可以在图像之上，图像应该是底层。

let character = document.getElementById('character');
let characterBottom = parseInt(window.getComputedStyle(character).getPropertyValue('bottom'));
let characterRight = parseInt(window.getComputedStyle(character).getPropertyValue('right'));
let characterWidth = parseInt(window.getComputedStyle(character).getPropertyValue('width'));
let ground = document.getElementById('ground');
let groundBottom = parseInt(window.getComputedStyle(ground).getPropertyValue('bottom'));
let groundHeight = parseInt(window.getComputedStyle(ground).getPropertyValue('height'));
let isJumping = false;
let upTime;
let downTime;
let displayScore = document.getElementById('score');
let score = 0;

function jump(){
    if(isJumping) return;
    upTime = setInterval(() => {
        if(characterBottom >= groundHeight + 250){
            clearInterval(upTime);
            downTime = setInterval(() => {
                if(characterBottom <= groundHeight + 10){
                    clearInterval(downTime);
                    isJumping = false;
                }
                characterBottom -= 10;
                character.style.bottom = characterBottom + 'px';
            }, 20);
        }
        characterBottom += 10;
        character.style.bottom = characterBottom + 'px';
        isJumping = true;
    }, 20);
}

function showScore(){
    score++;
    displayScore.innerText = score;
}

setInterval(showScore, 100);

function generateObstacle(){
    let obstacles = document.querySelector('.obstacles');
    let obstacle = document.createElement('div');
    obstacle.setAttribute('class', 'obstacle'); 
    obstacles.appendChild(obstacle);
    
    let randomTimeout = Math.floor(Math.random() * 1000) + 1000;
    let obstacleRight = -30;
    let obstacleBottom = 100;
    let obstacleWidth = 30;
    let obstacleHeight = Math.floor(Math.random() * 50) +50;
    obstacle.style.backgroundColor = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
    
    function moveObstacle(){
        obstacleRight += 5;
        obstacle.style.right = obstacleRight + 'px';
        obstacle.style.bottom = obstacleBottom + 'px';
        obstacle.style.width = obstacleWidth + 'px';
        obstacle.style.height = obstacleHeight + 'px';
        if(characterRight >= obstacleRight - characterWidth && characterRight <= obstacleRight + obstacleWidth && characterBottom <= obstacleBottom + obstacleHeight){
            alert('Game Over! Your score is: ' +score);
            clearInterval(obstacleInterval);
            clearTimeout(obstacleTimeout);
            location.reload();
        }
    }
    
    let obstacleInterval = setInterval(moveObstacle, 20);
    let obstacleTimeout = setTimeout(generateObstacle, randomTimeout);
}

generateObstacle();
    
function control(e){
    if (e.key == 'ArrowUp' || e.key == ' '){
        jump();
    }
}

document.addEventListener('keydown', control);

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
#ground{
    width: 100%;
    height: 100px;
    background-color: purple;
    position: absolute;
    bottom: 0;
}
#character{
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    bottom: 100px;
    right: calc(100% - 100px);
}
.obstacle{
    width: 30px;
    height: 100px;
    background-color: black;
    position: absolute;
    bottom: 100px;
    right: 0;
}
h2{
    font-family: sans-serif;
    margin-top: 10px;
    margin-left: 10px

    
    
    
    
    








    

    

    

    
Score: 0