I'm having some difficulty overlaying a logo on top of a background image. In my HTML code, the background image is continuously refreshed to appear like a video stream. The image, dublin-rememberance-floor2, is retrieved from a database using JavaScript and displayed in fullscreen. My logo, logo.svg, is supposed to sit in the top left corner, but it currently appears behind the background image. I've tried a few methods but haven't had any success.
<body>
<img class="fullBG" evercam='dublin-rememberance-floor2' refresh="1000" alt="" /> <div class="logo">
<img height="25" src="http://www.evercam.io/img/logo.svg" border="0" width="175" alt="http://www.evercam.com/" />
</div>
width="175" alt="http://www.evercam.com/" />
<img />
<script>
$(document).ready(function () {
Evercam.setApiUrl('http://api.evercam.io/v1');
});
</script>
</body>
Here is my CSS for the fullBG and logo;
.fullBG {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
z-index: 1;
width:100%;
height:100%;
}
.logo{
position: absolute;
top: 0;
right: 0;
}
Update: After making adjustments to my CSS, this configuration seemed to resolve the issue.
.fullBG {
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
width:100%;
height:100%;
}
.logo{
position: absolute;
top: 0;
right: 0;
z-index: 1;
}