How to fix a background img that isn't showing - html

Question

My background image isn't showing and I can't figure out why. I've already read through a few other threads but none of the suggestions are working.
The path to the background image is correct, that's not the problem. I've added a height and size/position etc.
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("links/slideshow/_anx_tote2.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
The background image should cover the right half of the screen.

Answer 1

* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
width: 100%;
background-image: url("https://picsum.photos/200");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
You need to add 100% height for body and HTML.

Answer 2

The image doesn't show because there was no width and height set to #slideshow.
Adding percentage height to a div, a height has to be determined first.
For more information, you can see here.
Thus I have added height: 100vh; and width: 100% to #slideshow;
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("https://i.imgur.com/WLimwqR.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100vh;
width: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>

Answer 3

#slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%;
}