Slide Schow mit festem Hintergrundbild

Hallo Experten, wie kann ich bei einer Slideshow (siehe Code) ein bestimmtes Hintergrundbild genau hinter den anderen Bildern der Slideshow einbauen und dabei auch die Transparenz des Bildes im Code festlegen? Habe leider zu meinem Problem leider nichts Passendes gefunden, was ein Anfänger auf Anhieb versteht... Sorry, ich bin ein kompletter Neuling in HTML / Javascript. Vielen Dank bereits im Voraus für eure Tipps bzw. Hilfsbereitschaft!
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.slideshow-container:after{
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image:url('/image/2.png');
width: 100%;
height: 100%;
background-size:cover;
background-repeat:no-repeat;
opacity : 0.5;
z-index: -1;
filter: grayscale(0.75);
filter: hue-rotate(270deg);
}
.text {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX