Question

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?

Answer 1

background-position: top center;