<html>
<head>

<title>CSS Fullscreen Modal Example</title>

<style type="text/css">

body {
height: 100%;
}

body {
font-family: Helvetica, Arial, sans-serif;
padding: 2rem;
background-color: #5A7A9B;
color: #000000
}

a {
color: inherit;
}

.container {
display: table;
width: 100%;
height: 100%;
}

.interior {
display: table-cell;
vertical-align: middle;
text-align: center;
}

.btn {
background-color: #ffffff;
padding: 1em 3em;
border-radius: 3px;
text-decoration: none;
}

#button {
position: absolute;
z-index: 2;
left: 20px;
top: 150px;
}

.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.15);
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
}

.modal-window:target {
opacity: 1;
pointer-events: auto;
}

.modal-window>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 2rem;
background: #fff;
color: #444;
}

.modal-window header {
font-weight: bold;
}

.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
right: 0;
text-align: center;
top: 0;
width: 700px;
text-decoration: none;
}

.modal-close:hover {
color: #000;
}

.modal-window h1 {
font-size: 150%;
margin: 0 0 15px;
}

</style>

</head>
<body>

<div class="container">
<div class="interior">
<a class="btn" href="#open-modal">Click to Open a CSS Fullscreen Modal Example</a>
</div>
</div>
<div id="open-modal" class="modal-window">

<h3 style="text-align: center;">This modal window/div contains a fullscreen image.<br>
That image is assigned a z-index value of 1.<br>
The button image is assigned a z-index value of 2 <br>and is therefore visible on top of the fullscreen image. <br>Define its absolute position for placement.</h3>

<div style="background: #ffffff; color: #FFDE16; padding: 5px; width: 300px; text-align: center; font-weight: bold; margin: 0 auto;"><a href="#modal-close" title="Close" class="modal-close">Click here to CLOSE this Modal Window</a></div>

<div>

<div>Text and other content can be inserted here as needed.</div>

<div id="button">
<a href="http://www.suggest-a-fix.com/index.php?/topic/1867-modal-window-image-on-top-of-another-image/" target="_blank"><img src="button.png"></a>

</div>
</div>
</div>

</body>
</html>