Gradient Not Filling Entire Area - css

Question

I'm trying to figure out how I can adjust the css in my register.php page so that the gradient will fill the entire area like it does on my login page.
http://www.kansasoutlawwrestling.com/kowmanager/register
http://www.kansasoutlawwrestling.com/kowmanager/login

Answer 1

If you want to use the same background gradient image for both the login & register forms you can modify your CSS rule to position the gradient at the top of the registration box and apply a background color #E7E7E7 so that the bottom of the gradient fades into a solid color. Like this:
.register-style {
background: #E7E7E7 url("../images/login.jpg") no-repeat scroll center top;
}
Alternatively, you can create a taller version of the gradient image and use that in your .register-style class.

Answer 2

The simple answer is "make the gradient image a bit taller".
Alternatively, you can use CSS3 gradients.
http://www.colorzilla.com/gradient-editor/ will generate cross-browser CSS that works in "all browsers".

Answer 3

If you want to cover just the case you have on register.php, try to add these styles:
.register-style {
background-position: top;
}
.register-inside {
height: 276px;
}
.register-data {
padding: 20px 10px 20px 30px;
}
Doing so you'd position the gradient to top, make the block a little smaller so the gradient would fit and make the paddings of the lighter box a little smaller, so it would look better.
Also, if you have control over the register.php HTML, add class="text" to the inputs: they'd gain the same style the inputs on login page have.