Big gap under background image - html

Question

Im creating a website for a friend and when I add an image it just wont go to the bottom, I have literally tried everything from background-position: left bottom; to padding-bottom:0px to everything else, it just has a huge gap under it of the background. I have tried multiple images so it isn't just my image. I am using bootstrap and below ive put my code plus the custom css code..
HTML
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase"><br>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer"><br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
#welcome_placeholder, .welcome_placeholder {
background-color: #5bc0de;
height:300px;
border-radius:6px;
width:699px;
color:white;
padding-top:1px;
padding-left:28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left:20px !important;
padding-top:10px !important;
padding-right:20px !important;
padding-bottom:20px !important;
}
p {
font-size:14px !important;
}
.spaceform {
margin-top:8px;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
padding-left:0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image:url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
#welcome_placeholder,
.welcome_placeholder {
background-color: #5bc0de;
height: 300px;
border-radius: 6px;
width: 699px;
color: white;
padding-top: 1px;
padding-left: 28px;
background-image: url('/bg_hotel.out.png');
}
#news_container {
height: 296px;
width: 625px;
border-radius
}
#news_article {
height: 296px;
width: 625px;
}
.carousel {
border-radius: 5px 5px 5px 5px !important;
overflow: hidden !important;
}
.jumbotron {
border: 1px solid #ddd;
background-color: #FFF !important;
padding-left: 20px !important;
padding-top: 10px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
}
p {
font-size: 14px !important;
}
.spaceform {
margin-top: 8px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
padding-left: 0px !important;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: 'Open Sans', sans-serif !important;
}
body {
background-color: #edf2f6 !important;
background-image: url('http://s9.tinypic.com/xckwhy_th.jpg');
background-repeat: no-repeat;
background-position: bottom;
}
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color:white;" href="#">[site.shortname]</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li>71 users online
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase">
<br>
<div class="col-md-8">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://limehotel.org/swfs/c_images/web_promos/promo_clouds.gif" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Lime ravamped</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/2.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>Hello Raven</h1>
<p>How are you raven?</p>
</div>
</div>
<div class="item">
<img src="http://limehotel.org/swfs/c_images/web_promos/1.png" style="border-radius:9px;" alt="...">
<div class="carousel-caption">
<h1>This is cool</h1>
<p>Lime returns with some amazing improovements.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- Carousel -->
</div>
<div class="col-md-4">
<div class="jumbotron">
<h4>Sign Up</h4>
<form name="login" action="post">
<input type="text" name="login_username" class="form-control spaceform" placeholder="Username...">
<input type="password" name="login_password" class="form-control spaceform" placeholder="Password...">
<input type="submit" name="login_form" class="btn btn-info spaceform" value="Sign Up">
Sign Up
</div>
</div>
</div>
<div class="container" style="">
<div id="footer">
<br>
<p>© [site.name] 2016. All Rights Reserved.</p>
</div>
<p> </p>
</div>

Answer 1

The image is aligned bottom of the body. Which it is. The body ends where the image finishes. If you make the footer div bigger you will see that the image goes to the bottom (bottom of the div).
The <body> contains all the content so the image goes at the end of the content NOT the bottom of the browser window. If you want the image to always be at the bottom of the browser window no matter what then you should use position: absolute; bottom:0;
How about adding this to body:
height:100vh;
See here: https://jsfiddle.net/1zq13grk/