Background image overlapping inserted images - html

Question

I'm playing around with HTML & CSS and is trying to make a pretty simple "under contruction" page. I made the background black and text white. I placed the text where I wanted and are not trying to insert an image below the text. I got the image into the site, but somehow it is behind my background? Anyone who got a clue what to do?
Heres my CSS code:
.fullscreenDiv {
background-color: #000000;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
background-attachment:fixed;
}
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -190px;
white-space: nowrap;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
}
.trademark {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: 250px;
margin-left: 400px;
white-space: nowrap;
font-family: Century Gothic
font-size: 80%;
color: #FFFFFF;
}
And my HTML:
<div class='fullscreenDiv'>
<div class="center">Our website is currently under construction.</div>
</div>
<div class='fullScreenDiv'>
<div class="trademark">#GameAdviser - Copyright 2014</div>
</div>
EDIT:
Just a quick problem now, I made it worked placed my picture, and uploaded it to my FTP, now when I enter the website I can't see my picture, just a border with the "image not aviable" image or whatever it is. Seems strange since I had a picture before which worked fine.
Tried to change it from png to jpeg but didn't make a difference.

Answer 1

You can use z-index like
z-index:199; // for the Element you want on top
z-index:-199; // for the Element you want at bottom

Answer 2

Add z-index property to .center and change the class name fullscreenDiv instead of fullScreenDiv case sensitive.
Try this code:
DEMO
.center {
position: absolute;
width: 60%;
height: 50px;
top: 50%;
left: 20%;
font-family: Century Gothic;
font-size: 120%;
color: #FFFFFF;
z-index: 10;
text-align: center;
}