Positioning a background image

So I'm marking up a simple login form using the following html;

<form>
    <label>Username:开发者_开发知识库</label>
        <input type="text" name="username" required="required" />
    <label>Password:</label>
        <input type="password" name="password" required="required" />
        <input type="submit" value="Login" name="submit" class="submit" />

and I've given it the following styling;

form {
background:url(images/logo.png) no-repeat;
width: 250px;
padding: 20px;
padding-top:120px;
margin: 200px auto;
-webkit-border-radius: 1em; 
-moz-border-radius: 1em;
border-radius: 1em;
border: 1px solid #DDD;

/*** Shadow behind the box ***/
-moz-box-shadow:0px 2px 5px #e0e0e0;
-webkit-box-shadow:0px 2px 5px #e0e0e0;

}

Everything works to plan except for the positioning of my background image which I would like to be centered at the top of the form. Currently is sits top left. Just wondering if there is a way around this besides creating a separate div for the image?

---

background-position: top center;

---

Do you mean positioning the background to the center of the form background? So the background position?

You can position the background by adding "center top" the background line, so you get background:url(images/logo.png) center top no-repeat;