多分もう夜更かしし過ぎたのかな.. よく分からないけど、体の底が切り取られている理由が分からない。マージン/パディングをいじってみましたが、何もうまくいきません。
最初は body 要素で ID を使用していましたが、DIV を追加することにしたため、それが壊れてしまいました。
601px で途切れるので、余白がずれているように感じますが、わかりません。<div ID='index'>ページ全体を埋めたいのですが、そうではありません。
実際の例: 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>