Css: Background Image Does Not Fill When Scrolling

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

I think what you're trying to achieve is parallax scrolling. It should be enough to add this CSS to your image:

background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

For more information look here: W3Schools

I added the CSS to your snippet but I'm not sure if it works as the image is a relative path and not existent on StackOverflow's servers.

// 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("️"))
// appending the delete button to each li that is created 
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function() {
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
}
}

//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList() {
if (inputLength() > 0) {
newTaskList();
}
}

// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);

* {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

/* Main title and text box/button ------------------------ */

.container0{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
height: 100%;
}

.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

h1 {
position: relative;
bottom: -15px;
transition: all .7s ease-in-out; 
}

h1:hover {
transform: scale(1.3); 
}

#enter {
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
}

.input-group {
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
}

input {
height: 35px;
width: 250px;
}

#enter:hover {
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
}

/* Main body columns and inner divs ------------------------ */

.container1{
margin: 5px;
display: flex;
flex-direction: column;
height: 100%;
}


.pic1 {
 

   background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
min-height: 100vw;
}

.pic2 {
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
min-height: 100vw;
}

.usertextbox {
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100%;
}

.usertext {
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
height: 100%
}

/* Titles and lists in active and completed columns ------------------------ */

h2 {
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
}

h2:hover {
background-color: rgb(15, 15, 238);
color: white;
}

li {
font-size: 1.1rem;
padding: 2px; 
position:relative;
left: -30px;
height: 50px;
}

.completedLi {
font-size: 3.1rem;
padding: 2px; 
position:relative;
left: -30px;
height: 60px;
}

.grow {
transform: scale(1.2);
}

<!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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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 class="container0">
    <div class="row">

        <div class="title col-12">
                
                <h1>To Do List</h1>
        </div>

        <div class="title col-12">
            <div class="input-group">
                <span>
                    <div class="submit" 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 class="container1">
    <div class="row">

        <div class="col pic1">
            <div class="usertextbox">
                <div class="usertext">
                    <h2>Active</h2>

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

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

        <div class="col pic2">
            <div class="usertextbox">
                <div class="usertext">
                    <h2>
                        Completed
                    </h2> 
            
                    <ul id="completedTaskList">
                
                    </ul>

                </div>

            </div>
        </div>

    </div>

</div>






</body>
</html>

How do I make the background image still while scrolling?

You can do this with the background-attachment property in CSS.

Example:

body {
  background-image: url(https://picsum.photos/1080/1920);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  background-attachment: fixed;
  
  height: 300vh;
}

.cover {
  background-color: aqua;
  height: 50vh;
  margin-top: 90vh;
  padding: 20px;
}

<div class="cover">
  (covering up so you can see the effect)
</div>

Need background image to fill screen to bottom even when scrolling

Remove height: 100% from the .page-container.

html, body {
    height:100%
}
.page-container {
    position: relative;
    max-width:978px;
    width: 100%;
    min-height:100%;
    background:rgb(240, 240, 240) url(http://www.waldorfteacherresources.com/img/lady-sprite.jpg) repeat;
}
.main-content {
    width: auto;
    background: transparent;
    overflow:visible;
}

CSS: Background image does not fill when scrolling - redux

just change min-height:100% to min-height:1092px (the height of the image) and you'll be fine...

EDIT:

previous answer was a bit too quick, after having a second look on the code i noticed the error is caused by the floated columns: if you float an element, the container element will not inherit the height of the floated element - that's why the height was set to 100% of the initial window, and was not expanded if the content column got longer.
This can be fixed by adding an extra element in #container, after #rightcolumn, with clear:both on it - this will force the parent element to take over the height of its contents.

See http://jsfiddle.net/uS7Ba/1/ for a simplified example, including improved fixed footer.

Hope it helps...

Background Image not remaining fixed on scrolling

According to W3schools

background-attachment: scroll|fixed|local|initial|inherit;

Check this property this will solve your problem..

Here the value fixed is used to fix the background with regard to the viewport.

You can edit your code like this-

body
{
    background-attachment: fixed;
    position: absolute;
    top = 0;
    bottom = 0;
    left = 0;
    right = 0;
    background-image:url("tomb_raider_definitive_edition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

Hope this helps.

Fixed background image with full window stretch and fit with no repeating when scrolling?

object-fit

https://css-tricks.com/almanac/properties/o/object-fit/

it's the best choice for you that can stretch and fit 100%

.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }

https://jsfiddle.net/y3cobhp1/

& what you looking for exactly below

    .object-fit_fill { object-fit: fill }
OR
    .object-fit_cover { object-fit: cover }

https://jsfiddle.net/y3cobhp1/1/

CSS background image that can scroll

UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen.

body,html {
  margin: 0;   }
.image {  background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");  background-position:center;  background-size: 100% 100%;    height:300vh;    }

<body>
   <div class="image">
 </div></body>