Setting submit form button with a background image?

Question

i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?

HTML

<div id="headerSearch">
    <form method="post" action="Test.php">
        <div id="headerSearchBar">
            <input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
        </div>
        <div id="headerSearchBtn">
            <input class="btnSearch" id="button" name="submit" type="submit" value="">
        </div>
    </form>
</div>

CSS

#headerSearch{
    float:right;    
    width:80%;
    height:80px;
}
#headerSearchBar{
    float:left;
    width:90%;
    height:80px;

}
.tbSearch{
    height:25px;
    width:95%;
    margin-top:27.5px;
    margin-left:2%;
    margin-right:0;
    margin-bottom:0
}
#headerSearchBtn{
    float:right;
    width:10%;
    height:80px;
    text-align:center;
}
.btnSearch{
    background-image:url(../IMAGES/btnSearch.svg) no-repeat;
    width:25px;
    height:25px;
    margin-top:27.5px;
}

Possible duplicate [here](http://stackoverflow.com/questions/20904817/adding-an-image-to-submit-button-using-css) — Stacked, Jun 18 '16 at 14:53

score 0 · Answer 1 · answered Jun 18 '16 at 14:52

0

You need to use just background

background:url(../IMAGES/btnSearch.svg) no-repeat;

answered Jun 18 '16 at 14:52

Michael St Clair

5,937
10
49
75

Thanks for the help this has definitely done something as the default image has disappeared, however there is now no image there at all just a blue border. Any ideas? – Matt Hutch Jun 18 '16 at 15:01
Try an absolute url, to make sure that you have the right path. So put the domain name in the url. – Michael St Clair Jun 18 '16 at 15:04

score 0 · Accepted Answer · answered Jun 18 '16 at 15:13

I've found a method that fixes the issue, as Michael St Clair has mentioned I needed to use just background in the css rather than background-image. This removed the default browser image and didn't display my selected image.

I used a different method that has now fixed the issue, I tried this method before but with the background-image tag rather than with just background as Michael St Clair suggested, which all and all has now fixed the issue.

HTML

<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">

CSS

.btnSearch{
    width:25px;
    height:25px;
    margin-top:27.5px;
}

input#btnSearch{
    background:url(../IMAGES/btnSearch.svg) no-repeat;
}

score 0 · Answer 3 · answered Jun 18 '16 at 16:39

0

Add background-size:100% 100% to your button css. Something like this: http://codepen.io/shreya1289/pen/QEKGWa

answered Jun 18 '16 at 16:39

pix1289

514
1
7
24

Setting submit form button with a background image?

3 Answers3