Background image doesn't cover when scrolling down page and new content is added-CodePudding

I'm creating a simple To Do list that allows user to add and remove items. Everything works exactly how I want it to....EXCEPT.... my background images on two main columns no longer appear when user adds enough items to cause page to start scrolling. I though background-image repeat would work, but it doesn't.

HTML ----------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./static/css/normalize.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./static/css/todo.css">

    <script defer src= "./static/JS/toDo.js"> </script>
    <title>To Do List</title>
</head>
<body>

    
</div>

<div >
    <div >

        <div >
                
                <h1>To Do List</h1>
        </div>

        <div >
            <div >
                <span>
                    <div  id="submitbutton">
                        <input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
                        <button id="enter">Add</button>                                     
                    </div>
                    </span>
                </span>
            </div>
        </div>

    </div>
</div>



<div >
    <div >

        <div >
            <div >
                <div >
                    <h2>Active</h2>

                    <ul id="activeTaskList">
                
                    </ul>

                </div>
                
            </div>
            
        </div>

        <div >
            <div >
                <div >
                    <h2>
                        Completed
                    </h2> 
            
                    <ul id="completedTaskList">
                
                    </ul>

                </div>

            </div>
        </div>

    </div>

</div>






</body>
</html>

JS ------------------------------------------------------------------------------

// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks 
var completedTasks = document.getElementById("completedTaskList");


// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength () {
return input.value.length;
}

// function to create new task list item and corresponding delete button
function newTaskList() {
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran 
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable 
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'

//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function(){
deleteButton.classList.add('grow')
})
deleteButton.addEventListener('mouseleave', function(){
deleteButton.classList.remove('grow')
})

//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("