div on top of responsive background image - css

Question

I am trying to create a simple responsive splash page with a background image and a div on top.
I have managed to get the responsive background image. This works well.
Now I am having issue placing a div on top of this background and making sure it follows the resizing properly.
I have set percentage margins for this div but it's not keeping the percentages, also if I make the window too small then the div disappears completely.
How can I fix this problem?
Thanks a lot for your help.
Guillaume
The address:
http://b-tees.net/testsplash/
My html:
<div id="bg">
<img src="http://b-tees.net/wp-content/uploads/2014/08/london.jpg" alt="">
</div>
<div id="selector">
<?php do_action('icl_language_selector'); ?>
</div>
My CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#selector {
position:absolute;
margin-top:10%;
margin-left:10%;
}

Answer 1

My suggestion is to use like this : Demo
instead of the method you are using atpresent
CSS:
html, body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
}
.bg_img {
background:url("http://b-tees.net/wp-content/uploads/2014/08/london.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
}
#selector {
display:block;
vertical-align:middle;
text-align:center;
margin:0 auto;
width:50%;
}
HTML:
<div class="bg_img">
<div id="selector">Test test test..
</div>
</div>