How do you use background: auto; correctly? - html

Question

I'm trying to make the background fill the whole page. The only way I figured out how to do it is by setting the height and width of <div id="All"> and putting that div around everything else. I know that if I change the size of the browser, though, it won't auto resize, so it would look weird if I made my browser smaller or bigger.
If I set height and width to auto on #All, it def doesn't fill out the whole webpage. Please advise what I am doing wrong. Plus if I do auto, the sticky #Move doesn't stay at the top of the page.
This code is just stuff I have learned, so not an actual project, but I want to learn how to do it for future projects.
#Move {
position: sticky;
top: 0;
color: red;
}
h1 {
color: red;
}
.Hello {
font-size: 36px;
}
.Hello2 {
font-size: 15px;
}
p {
color: white;
}
.DivClass {
width: 160px;
height: 220px;
padding: 40px;
border: 10px solid black;
border-radius: 60px;
margin: 50px;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSqOq9_iT948LTPmS5FuCMlaqlvn2KJQ-0d7Xw5kLMfWz69wwRA&usqp=CAU");
background-repeat: no-repeat;
background-size: cover;
opacity: 80%;
}
.image-whitecat {
width: 500px;
heigth: 500px;
background-color: red;
margin: 50px 50px 90px 250px;
transform: rotate(10deg);
}
.image-cat {
width: 700px;
height: 500px;
border-radius: 300px;
margin-left: 350px;
filter: opacity(70%)
}
.Purple {
color: purple;
}
.PurpleText {
background: teal;
text-align: center;
padding-top: 50px;
width: 150px;
height: 100px;
border: 5px solid red;
border-radius: 100px;
margin: 10px 0 0 1000px;
}
#All {
background-color: lavender;
position: absolute;
top: 10px;
bottom: 10px;
height: 1850px;
width: 1810px;
}
<div id="All">
<div class="DivClass">
<h1>HELLO!!!</h1>
<p class="Hello">Hello</p>
<p class="Hello2">Hello 2</p>
<p>Yes</p>
</div>
<p id="Move">I will stay at the top of the page!</p>
<div>
<img src="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-551554__340.jpg" class="image-whitecat" />
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" class="image-cat" />
</div>
<div class="PurpleText">
<p class="Purple">Purple</p>
</div>
</div>

Answer 1

I think you will need to give both your html and body tags a css height ...
html, body {
height: 100%;
margin: 0;
}
So,
https://jsfiddle.net/z51crou7/