HTML/CSS: Bottom of body cut off - html

Question

Maybe it's too late at night.. I'm not sure, but I can't figure out why the bottom of my body is cut off. I've tried playing around with margins/padding, but nothing is working the way it should.
I originally used an ID on my body element, but then decided to add an extra DIV and that's when it broke.
It gets cut off at 601px, which makes me think my margins are off, but I can't tell. I'd like the <div ID='index'> to fill the entire page, but it's not.
Live Example: http://jsfiddle.net/QbUKN/1/
CSS:
body {
margin: 0;
padding: 0;
}
#index {
background: url(../img/bamboo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#b0c4de;
/*
position: absolute;
width: 100%;
height: 100%;
z-index:-1; */
}
#profile {
background: url(../img/lime.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bird {
z-index: 0;
position: fixed;
bottom: 0;
left: 0;
}
/******** WELCOME PAGE ********/
#indexContent {
padding-top: 150px;
}
#welcome {
margin-left: 15%;
margin-top: 150px;
text-align: center;
vertical-align: middle;
float:left;
width: 40%;
z-index: 1;
}
#welcome h1, h2 {
color: white;
font-family: 'Poller One', cursive;
}
#login, #signup {
margin: 10px 60%;
background-color: #FCFAEE;
padding: 0 25px 20px 15px;
border:1px solid;
border-radius: 15px;
width: 300px;
position: relative;
z-index: 1;
/*Box shadow to make div look like it is popping off screen
-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.75);
box-shadow: 0px 0px 30px rgba(0,0,0,0.75); */
}
#login h3, #signup h3 {
border-bottom: 1px solid;
padding-bottom: 10px;
border-color: #D8D8D8;
margin-bottom: 10px;
}
#login .button, #signup .button {
width: 104%;
}
.textField{
margin: 3px 0px;
padding: 5px;
width: 100%;
}
/******** PROFILE ********/
.fillPage {
height: 100%;
margin: 0;
padding: 0;
}
#profileContent {
/*background-color: rgba(255,255,255, .50);*/
background-repeat:repeat;
min-height: 100%;
margin: 0 20% 0 20%;
overflow: hidden; /* Removes background-color gap at end of page in IE */
min-width: 600px;
}
#username {
float: left;
line-height: 1.5em;
}
#logout {
float: right;
margin-right: 25px;
}
#left {
width: 250px;
float: left;
position: fixed;
}
#right{
margin-left: 290px;
margin-right: 50px;
}
#left, #right {
padding-top: 70px;
}
.clear{
clear: both;
}
#stickyNav {
position: fixed;
font-size: 1.5em;
color: white;
background: black;
z-index: 1000;
min-width: 100%;
padding: 10px;
}
.menuItem {
margin: 0px 10px 10px 10px;
background-color: #FCFAEE;
padding: 10px;
border:1px solid;
border-radius: 15px;
width: 100%;
position: relative;
z-index: 1;
-webkit-box-shadow: 2px 2px 0px black;
-moz-box-shadow: 2px 2px 0px black;
box-shadow: 2px 2px 0px black;
}
textarea {
width: 100%;
margin-bottom: 5px;
vertical-align: top;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
overflow: auto;
}
/******** Button Effects ********/
.button {
width: 100%;
-moz-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffe0b5;
box-shadow:inset 0px 1px 0px 0px #ffe0b5;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb450), color-stop(1, #f89306));
background:-moz-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-webkit-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-o-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:-ms-linear-gradient(top, #fbb450 5%, #f89306 100%);
background:linear-gradient(to bottom, #fbb450 5%, #f89306 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89306',GradientType=0);
background-color:#fbb450;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #c97e1c;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
font-weight:normal;
padding:6px 11px;
text-decoration:none;
text-shadow:0px 1px 0px #8f7f24;
}
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f89306), color-stop(1, #fbb450));
background:-moz-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-webkit-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-o-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:-ms-linear-gradient(top, #f89306 5%, #fbb450 100%);
background:linear-gradient(to bottom, #f89306 5%, #fbb450 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f89306', endColorstr='#fbb450',GradientType=0);
background-color:#f89306;
}
.button:active {
position:relative;
top:1px;
}
HTML:
<div id="index">
<div id="indexContent">
<div id="welcome">
<h1>Welcome!</h1>
<h2>MORE STUFF</h2>
</div>
<div id="login">
<form name="login" action="users/profile" method="post">
<h3>Please Sign In</h3>
<input class="textField" type="text" name="email" placeholder="Username or Email"/><br/>
<input class="textField" type="text" name="password" placeholder="Password"/><br/>
<input class="button" type="submit" value="Sign In"/>
</form>
</div>
<div id="signup">
<form>
<h3>Sign up</h3>
<input class="textField" type="text" name="name" placeholder="Full Name"/><br/>
<input class="textField" type="text" name="email" placeholder="Email"/><br/>
<input class="textField" type="text" name="password" placeholder="Password"/><br/>
<input class="button" type="submit" value="Sign Up" />
</form>
</div>
</div>
<div id="bird">
<img src="img/parrot.png" alt="Parrot" />
</div>
</div>

Answer 1

If you want your background to fill the entire page, you should leave your background styles on body. In your index div, you only have 601px of content in height, that's why your background cuts off at 601px.
Edit: this might be what you want.
html {
height: 100%;
}
body {
height: 100%;
}
#index {
height: 100%;
}
fiddle

Answer 2

Adding bottom padding to your existing #indexContent would be the simplest solution.
#indexContent {
padding-top: 150px;
padding-bottom: 150px;
}

Answer 3

#indexContent {
padding-bottom: 100px;
padding-top: 150px;
}
#bird {
bottom: 0;
height: 100px;
left: 0;
position: fixed;
z-index: 0;
}
'#indexContent' div's padding-bottom should be equal or higher than '#bird' div height

Answer 4

Your code works perfectly fine. Just add a small change on id 'index' and 'bird'.
#index {
Display : table;
background: url(../img/bamboo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#b0c4de;
width:100%;
height:100%;
position: relative;
}
#bird {
position:fixed;
bottom: 0;
left: 0;
}