Updated version thanks to input from these awesome folks: Druid of Lûhn - http://codepen.io/Druid-of-Luhn Hugo Giraudel - http://codepen.io/HugoGiraudel Kasper Mikiewicz - http://codepen.io/Idered
Fixed poor construction (using div's originally), and shi
<div id="bg">
<img src="http://img.skitch.com/20120905-fccfjyqxpxbkrhs6wct3xuyrjf.png" alt="">
</div>
<form>
<div class="title">Login</div>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Get in there">
</form>
body {
background: #bdbdc7;
margin: 0 0;
padding:10px;
text-align:center;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
.title {
position:relative;
font-family: 'Myriad Pro','Helvetica Neue', Helvetica;
font-weight:bold;
font-size: 25px;
text-shadow: 0px 1px 2px rgba(255,255,255,.5);
color: #444;
text-align:center;
}
form {
background: none;
margin: 20px auto 0;
padding: 10px;
width: 280px;
}
input {
display: block;
font-size: 14px;
width:240px;
margin: 10px auto;
padding: 10px 8px 10px 8px;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0,0,0, .55), 0px 1px 1px rgba(255,255,255,.5);
border: 1px solid #666;
}
input {
opacity: 0.5;
}
input:hover,
input:focus {
opacity: .7;
color:#08c;
border: 1px solid #08c;
box-shadow: 0px 1px 0px rgba(255,255,255,.25),inset 0px 3px 6px rgba(0,0,0,.25);
}
input[type="text"]:focus,
input[type="password"]:focus {
box-shadow: inset 0 1px 2px rgba(255,255,255, .35), 0px 1px 15px rgba(0,246,255,.5);
border: 1px solid #08c;
outline: none;
}
input[type="submit"] {
appearance: none;
opacity: .99;
width:120px;
background: #08c;
box-shadow: inset 0 1px 2px rgba(255,255,255, .35), 0px 1px 6px rgba(0,246,255,.5);
border: 1px solid #0a5378;
border-radius: 4px;
color: #eee;
cursor: pointer;
text-shadow:0px -1px 0px rgba(0,0,0,.5);
}
input[type="submit"]:hover {
background: #08c;
width:120px;
border: 1px solid #0a5378;
border-radius: 3px;
box-shadow: inset 0px 3px 16px rgba(0,0,0,.25),0px 1px 10px rgba(255,255,255,.5),inset 0px -1px 2px rgba(255,255,255,.35);
text-shadow:0px 1px 1px rgba(0,0,0,.65);
-webkit-transition: all 0.40s ease-out;
transition: all 0.40s ease-out;
}