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"> <input type="text" name="q" onkeyup="showUser()" /> <input type="button" name="button" value="Search" onclick="showUser()"/> <p> <div></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.
25 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()"/> <input type="image" name="button" value="Search" onclick="showUser()"/> <input type="submit" name="button" value="Search" onclick="showUser()"/> </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;
}
