How to Position an Image underneath a form in CSS - html

Question

I am making a login page and I would to position a custom image border to the center underneath the form.
The image is not positioning to the margin-left properly.
Can anyone suggest a solution?
Below is the code:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#import url(http://fonts.googleapis.com/css?family=Roboto);
* {
text-align: center;
}
img {
z-index: -1;
width: 350px;
height: 200px;
margin-top: 200px;
background-size: cover;
position: absolute;
}
body {
background-color: #ecf0f1;
}
#username {
margin-top: 250px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#username:focus {
outline: none;
}
#password {
margin-top: 5px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#password:focus {
outline: none;
}
#submit {
margin-top: 35px;
border: 0;
background: url(submit1.png);
background-repeat: no-repeat;
width: 200px;
height: 50px;
border: 0;
}
#submit:focus {
outline: none;
}
#submit:hover {
background-image: url(submit2.png);
}
#footer {
clear: both;
position: relative;
z-index: 5;
margin-top: 17em;
background-color: transparent;
font-family: 'Roboto', serif;
color: #bdc3c7;
height: 20px;
font-size: 10px;
}
<div id="main">
<div id="login">
<form action="Scripts/xxx.php">
<img src="border_transparent.png">
<input id="username" type="text" name="username" placeholder="Enter Username" />
<br>
<input id="password" type="password" name="password" placeholder="Enter Secret Password" />
<br>
<button id="submit" value="" />
</form>
</div>
</div>
<div id="container">
<div id="content"></div>
</div>
<div id="footer">© Project Blackhat Operatives 2015</div>
This is currently how my page looks: http://s7.postimg.org/vvfi8m1uj/Screen_Shot_2015_01_11_at_7_07_21_PM.png
This is what I am trying for the page to look like: http://s11.postimg.org/avy2caylv/Screen_Shot_2015_01_11_at_7_09_01_PM.png

Answer 1

It is centered, the issue is the background image behind it that you are absolute positioning. That isn't centered, you can add left: 50% and a negative margin to bring it back to the center (left positions it from the corner not the center):
img {
z-index: -1;
width: 350px;
height: 200px;
background-size: cover;
position:absolute;
left: 50%; //add
margin: 200px 0 0 -175px; //add
}
FIDDLE
What you should be doing though is adding that image as a background-image to either your form or #login containers. Positioning an img tag is not a great way of handling this.

Answer 2

Try
#submit:hover {
background-image: url("submit2.png");
}
Need quotes/double quotes.