how do i add a background image to a login box

how do i add a background image to a login box

i want one like the wordpress login or a cool alternate

my code:

 

This is the CSS code from the WP login form, there is no background image.

form{margin-left:8px;padding:16px 16px 40px 16px;font-weight:normal;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:5px;background:#fff;border:1px solid #e5e5e5;-moz-box-shadow:rgba(200,200,200,1) 0 4px 18px;-webkit-box-shadow:rgba(200,200,200,1) 0 4px 18px;-khtml-box-shadow:rgba(200,200,200,1) 0 4px 18px;box-shadow:rgba(200,200,200,1) 0 4px 18px;}

Code (markup):

Add this to your CSS and style it a little bit to suit your needs.

 

add this on your css

.p4{
background: url("image.jpg") no-repeat; [COLOR="red"]<-- whichever background you want to use the file name with path [/COLOR]
}

Code (markup):

 

ummm ot working

 

Do you have an URL where we can see the result?

 

sorry deleted it now. but all it did was place the image behind it with th ebox over the top. im looking to make a login box thats all that looks cool

 

Then you'll want to modify the actual style of the box and the elements with CSS.

First, I suggest getting rid of the border on the table.

Then, try adding this in your CSS:

.p4 input { background:#fff; color:#666; padding:2px 5px; margin:0; border:1px solid #666; -moz-border-radius:7px;-khtml-border-radius:7px;-webkit-border-radius:7px;border-radius:7px; }
  .p4 input.btn { background:#666; color:#fff; cursor:pointer; }

Code (markup):

That should be a good start for the inputs, but you'll want to brush up on CSS and play with it until you get it looking how you like.

 

ok will try...

most of my css have # in front?
also ho do i delete the border?