Identifying why some images won't load after publishing to web - html

Question

Okay, my website is like 95% there. And I'm absolutely stumped as to why I can't see them.
Everything works on it except that three images won't display after publishing through my cPanel. The files that won't load are Layer4.png, Layer3.png, Layer2.png
All the naming is correct between image and css url reference. The images are not corrupt or damaged, I checked. Everything is in the right directory. The code is the same for each layer, only file names are unique. There's a bit of java script that creates a parallax between each layer, but I don't think that would matter since only three layers are affected but use the same code.
Any ways to troubleshoot this?
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0);
}
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
top:105px;
z-index: 25;
background-image: url("images/Layer0.png");
background-position: bottom center fixed;
background-size:100%;

Answer 1

Based on the code you posted you are missing a relative container for your elements if you want them to be absolutely positioned, and you need content in the divs or to size them statically, see this example, I used a placeholder image for layer-5 to show you this:
.layer-0 {
top: 40px;
z-index: 5;
background:-webkit-linear-gradient(#f90, #FC0); }
.layer-1 {
top: 100px;
z-index: 5;
background-image: url("images/Layer4.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-2 {
top: 100px;
z-index: 10;
background-image: url("images/Layer3.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-3 {
top: 100px;
z-index: 15;
background-image: url("images/Layer2.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-4 {
top: 90px;
z-index: 20;
background-image: url("images/Layer1.png");
background-position: bottom center fixed;
background-size:100%;
}
.layer-5 {
position: absolute;
top:105px;
z-index: 25;
background-image: url("http://placehold.it/500x500");
background-position: bottom center fixed;
background-size:100%;
outline: 5px solid orangered;
height: 500px;
width: 100%;
}
.relative {
position: relative;
}
<div class="relative">
<div class="layer-5"></div>
</div>