Height:100% not working for my image - html

Question

I know its been asked a million times but none of the search results seemed to work for me.
I am wondering how i can make my image to the same size as the display. I know i have to give the parent of the image a height and width so that i can use Height:100% but how can i give its parent a height and width that is different for every device?
I used position:absolute but that just made all the other content sit on top of my picture :(
am using bootstrap as well (encase you need that info)
any help would be boss! thanks!
A lil bit of my markup
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" >
**this img below to be the size of users display**
<div style="background-color:#efefef; background-image: url(/App_Themes/Biz/Images/home-main.jpg); position: static; height:100%; width:100%; background-position:center bottom; background-repeat:no-repeat; background-size:cover;">
<div class="container" style="height:1200px;">
<div class="jumbotron" style="color:#fff; background-color:transparent; text-align:center;">
<h2 style="font-weight:bold!important;">FREE rents</h2>
<p>The easy way to rent out stuff</p>
<p><a class="btn btn-default" role="button" href="#moreInfoPanel" id="findOutMore">FIND OUT MORE</a> <a class="btn btn-primary" href="/Account/Add-Property" role="button">rent it now</a></p>
</div>
</div>
</div>
<div style="background-color:#eff5f7; border-top:solid 1px #e6e9ea; border-bottom:solid 1px #e6e9ea;">
<div class="container">
<img src="App_Themes/biz/Images/sign.png" alt=" Portals" style="padding:5% 0%; width:100%;" />
</div>
</div>
<div>
<div class="container" id="moreInfoPanel">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/free.png" style="margin-top:-55px;" alt="Lets Rent - FREE" />
<h4>Free</h4>
<p>
some stuff
</p>
<a href="Pricing" title="Read More - Pricing" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/quick.png" id="quickImage" runat="server" style="margin-top:-55px;" alt="QUICK" />
<h4>Quick</h4>
<p>
more crap
</p>
<a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4" style="margin:60px 0px 40px 0px">
<div style="text-align:center; padding:10px 30px; border:solid 1px #e7ecef; border-bottom:solid 5px #e7ecef;">
<img src="App_Themes/biz/Images/easy.png" style="margin-top:-55px;" alt="EASY" />
<h4>Easy</h4>
<p>
boom stuff here!
</p>
<a href="Benefits" title="Read More - Benefits" class="btn btn-primary" style="margin-bottom:-40px;" >read more</a>
</div>
</div>
</div>
</div>

Answer 1

One easy and fast way to do this is use vh-units. Check that you have proper browser support in http://caniuse.com/#feat=viewport-units
css:
.full-img{
height:100vh; /* This means 100 percent of viewport height */
background:red;
}
html:
Above the full height block
<div class="full-img">
<p>This takes 100% of viewport height = 100vh</p>
<p>check http://caniuse.com/#feat=viewport-units for browser support</p>
</div>
Below the full height block