Background image isn't displaying full resolution - html

Question

I have a background image that's about 1200 (w) x 800 (h) but i just want to use the whole 100% resolution for it. I have a button inside this div container but it's not displaying correctly. The background image won't expand to it's full resolution. It seems like it's only showing enough to allow the button to show.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
width: 100%;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
here's a little picture demonstrating what's going wrong vs what i want:

Answer 1

This has nothing to do with background image not expanding. Your div is simply not tall enough to show more of the image. Going off of your diagram, you want to add some padding to .endFoot.
background-size: cover; is a good choice, but you may also want to consider centering the position with background-position: 50% 50%;.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>

Answer 2

If you would like the endFoot div to have the same height as the background, just set the height to 800px, because 100% doesn't change anything in this case.
Also set the endFoot position to relative in order to put the botton to the correct position.

Answer 3

If you are trying to achieve full screen background try :
.endFoot {
width: 100vw;
height: 100vh;
}
For browser support informations of vh and vw units check : https://caniuse.com/#feat=viewport-units

Answer 4

Just add text-align:center to .endFoot class to make center button and add some margin to .customButton class for leave some space to bottom.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0px;
height: 100%;
position: relative;
text-align: center;
}
.customButton {
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>