I'm struggling to apply a background image to my submit button within a form. Despite trying different methods, I keep getting the default browser button. Can anyone pinpoint where my mistake might be?
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;
}