html - responsive div and height % does not work -


i've got small problem when trying make div img background responsive.

  1. the div doesn't size of image : 540px-290px
  2. when resize browser 2 div not resize together.

in each div have background image, want div responsive both 2 div don't full size, using % responsive. if use pixels not make responsive.

that image how should div. http://imgur.com/v9oroud

i using bootstrap framework

html

  <div class="row index-banner">      <div class="col-xs-6">       <div class="latest-mobile">         <h1> releases?</h1>             <p>we got </p>         <p>find out more ></p>         </div>     </div>      <div class="col-xs-6">        <div class="sponge-bob">         <h1>we have ....</h1>         <p>let kids enjoy .</p>         <p>find out more ></p>         </div>     </div>    </div> 

css

html, body {   width: 100%;   height: 100%; }  .col-xs-6 .sponge-bob {   background: url(../../public/images/content/sponge-bob.jpg) no-repeat;   margin-left: 5%;   width: 100%;   height: 100%;   -webkit-background-size: cover;   -moz-background-size: cover;   background-size: cover;   -o-background-size: cover;   display: table;   position: relative; }  .col-xs-6 .latest-mobile {   background: url(../../public/images/content/latest-mobile.jpg) no-repeat center center scroll;   margin-left: 7%;   width: 100%;   height: 100%;   -webkit-background-size: cover;   -moz-background-size: cover;   background-size: cover;   -o-background-size: cover;   display: table;   position: relative; } 

most need define minimum height set min-height: 100%;


Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -