Text Form Box HTML Background Image

Question

I have a text form in which the user should enter an email address. I would like this text form to have an image as a background.

Here's what I have so far:

HTML:

<form action="addemailtodatabase.php" method="post">
<input class="emailinput" type="text" name="email" maxlength="80"/>
<input type="submit" name="submit" value="Sign Up"/>
<input type="hidden" name="submitted" value="TRUE"/>
</form>

CSS:

.emailinput{
    background-image:url(images/desktop/field-normal.png);
    background-repeat:no-repeat;
    border:none;
    width:296px;
    height:62px;
}

I can't get rid of the white background behind the image (it's not the image file, that has rounded corners and no white bits).

Here's what it looks like:

Any suggestions? Thanks.

Answer 1

Since you are not using a resetting or default style clearing stylesheet you'll need to set the background-color property as well. You can set it to transparent.

Answer 2

Your CSS will be like this:

.emailinput{
    background-image: #000 url(images/desktop/field-normal.png) no-repeat;
    border:none;
    outline:none;
    width:296px;
    height:62px;
}