Trouble with background image property!

I decided to try and do a custom WP login form and after awhile I think I almost have it. However, if I adjust the size of my browser window then the image moves and is no longer centered behind the login form. I tried setting the image as the form background but its getting masked out somehow. Im new at CSS so heres what I have…

body.login{background:url(http://ytango.com/wp-content/uploads/2012/02/login.png) fixed 40% 20% no-repeat;}

Here is the site: http://ytango.com/wp-login.php
Can anyone help me learn how to keep the image centered behind the form when its scaling without any crazy java?
Thanks,
Scott

Try something like this:

body.login{background: url(/wp-content/uploads/2012/02/login.png) center top no-repeat;}

You’ll have to reposition your form container to match up. If you use percentage positioning on a background image you’ll see it drift around as the browser resizes.

As for using WordPress for a dating site… I guess that’s off-topic.

Well your problem is that the elements of the page move around when resized. Unlses you are using a pixel perfect (and even then that’s not 100% guarenteed to work in all scenarios) design, when you resize the page, or even with different resolutions, things will move around due to %'s giving off different values based on width factors.

Whats wrong with building it on wordpress?

Thanks raw10 and Ryan. That did exactly what I wanted!