CODEWITHSUNDEEP
cssbackground
Guillaume Besson
Guillaume Besson

Reputation: 15

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

Upvotes: 0

Views: 3013

Answers (1)

G.L.P
G.L.P

Reputation: 7207

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>

Upvotes: 1

Related Questions