How to Add Background Image for Input Type="Button"?
I've Been Trying to Change the Background Image of the Input Button Through Css, but It Doesn't Work. Search. Html: Search. Css: .Button { Background-Image...
i've been trying to change the background image of the input button through css, but it doesn't work.
search.html:
<body>
<form name="myform" class="wrapper">
<input type="text" name="q" onkeyup="showUser()" />
<input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
<p>
<div id="txtHint"></div>
</p>
</form>
</body>
search.css:
.button {
background-image: url ('/image/btn.png') no-repeat;
cursor:pointer;
}
what could be wrong?
even inline-ing the css didn't seem to work.
5 Answers
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>
Just to add to the answers, I think the specific reason in this case, in addition to the misplaced no-repeat, is the space between url and (:
background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */
background-image takes an url as a value. Use either
background-image: url ('/image/btn.png');
or
background: url ('/image/btn.png') no-repeat;
which is a shorthand for
background-image: url ('/image/btn.png');
background-repeat: no-repeat;
Also, you might want to look at the button HTML element for fancy submit buttons.
If this is a submit button, use <input type="image" src="..." ... />.
If you want to specify the image with CSS, you'll have to use type="submit".
.button{
background-image:url('/image/btn.png');
background-repeat:no-repeat;
}
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
