How can I overlay a PNG over my background video without it appearing behind?
I attempted to use z-index, but the video disappears when changing the position from relative to absolute or fixed. Here is the HTML and CSS code:
<div id="page2">
<video autoplay loop muted id="video">
<source src="Images/KeyboardVideo.mp4">
<source src="Images/KeyboardVideo.webm">
</video>
<div id="servicelogo"><img src="images/htmlcssjs.png"></div>
</div>
/* CSS Document */
* {margin: 0; padding: 0;}
body{
font-family: arial,helvetica;
color: black;
text-align: center;
}
h1{
font-size: 6em;
padding-top: 305px;
opacity: 0.8;
}
p{
font-size: 2em;
}
#wrapper {
position: fixed;
height: 80px;
width: 100%;
background-color: black;
z-index: 500;
}
#nav {
height: 80px;
width: auto;
float: right;
list-style: none;
position: relative;
margin-right: 100px;
z-index: 500;
}
#nav li {
height: 80px;
width: 100px;
float: left;
font-family: sans-serif;
font-weight: bold;
color: white;
padding: 0px 15px 0px 15px;
text-align: center;
line-height: 80px;
font-size: 20px;
}
#video {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(images/Nature2.jpg) no-repeat;
background-size: cover;
z-index: -1
}
#servicelogo img{
position: relative;
height: 40%;
width: 40%;
margin-top: 8%;
opacity: 0.8;
}
#page2 {
width: 100%;
max-height: 100%;
overflow: hidden;
top: 0;
right: 0;
}
a {text-decoration: none;}
/* unvisited link */
a:link {
color: white;
}
/* selected link */
a:active {
color: #7f8c8d;
}
/* visited link */
a:visited {
color: white;
}
/* mouse over link */
a:hover {
color: #7f8c8d;
}
#page1 {background-image: url(images/Nature1.jpg); z-index: -1;}
#page3 {background-image: url(images/Nature2.jpg);}
#page4 {background-color: #2ecc71;}