div on top of responsive background image

问题:

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%; } 

回答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> 

文章来源: div on top of responsive background image