How to Set Background Image in Submit Button

Background image for submit button not working

Try below code.

I have given button class name mybtn and applied background-image style.

HTML

<input type="submit" name="submit" class="mybtn"/>

CSS

input.mybtn {
    background-image: url("http://subtlepatterns.com/patterns/symphony.png");
    font-size: 12px;
    padding: 10px;
}

JSFIDDLE DEMO

Setting submit form button with a background image?

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;
}

CSS: background image for submit button

Try this.
It will give a fix height to the element.

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}

Setting background image is breaking submit button

I am sure there is no such thing called position: center;.

Changing that CSS property will help you out.

css submit button background image

Its because your setting it against property background-image.

The background-image property is just for specifying the background image value, no other background related properties.

Change this to background instead.

Or have 2 seperate properties:

background-image: url(..URL HERE..);
background-repeat: no-repeat;

Personally I prefer 2 seperate properties. It's clearer to see the no-repeat value being applied, and is more manageable under source control changes.

Can you turn a CSS background-image into a submit button using JavaScript?

You can wrap your search icon in <a></a> tags, that way your image will be clickable and can take the user to the page you want once he clicks on it: Here's an example:

    <div class="maindiv">
    <form id="myform" name="myform" method="post" action="schitems.php">  
    <input type="search"  id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<a href="search_results.html"><img src="search_icon.jpg" alt="search"></a>
    </form>
    </div>

How to add background image for input type= button ?

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

How to set Background image fit to the element

If what you want to achive is a rounded corner style, the best way to achieve that is by styling the button with css using the border-radius and the bootstrap btn class properties.

see this link for more info. Do not forget to add the !important value on css if you want to make changes over bootstrap clases.

Note that it's a better practice to make the use of styles and classes instead of images, since images will make your application less responsive and more rigid to handle. see this for more info.

.round{border-radius: 30px !important;}

<!-- Bootstrap importation -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<button type="button" class="btn btn-primary">Basic</button> This has default bootstrap round corners<br>
<br>if somehow you are using links try the link tag:<br>
<br><a href="#" class="btn btn-primary" role="button" aria-disabled="true">this is a link</a> here we made use of the "role" option and the bootstrap classes<br>
<h2> Changing round corners</h2><br>
<button type="button" class="btn btn-primary round">Basic</button> 30px round corner. notice how we also made the use of "!important" property on css in order to override bootstrap's default css properties<br>