how to set background image in submit button?
I have to use a image in place of regular submit button? which way would be best in xhtml/css?
Button should look same in all main browsers including IE6,IE7
Join Stack Overflow to learn, share knowledge, and build your career.
The way I usually do it, is with the following css:
div#submitForm input {
background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
and the markup:
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
If things look different in the various browsers I implore you to use a reset style sheet which sets all margins, padding and maybe even borders to zero.
input
element within the submitForm <div>
therefore the style would be applied to elements such as <input type="text">
. I'd consider setting a class against the submit input or using input[type="submit"]
to select the button.
– Jamie Bradley
May 29 '17 at 13:28
.button {
border: none;
background: url('/forms/up.png') no-repeat top left;
padding: 2px 8px;
}
Typically one would use one (or more) image tags, maybe in combination with setting div background images in css to act as the submit button. The actual submit would be done in javascript on the click event.
A tutorial on the subject.
i do it like this cover button and the middle image that
<button><img src="foldername/imagename" width="30px" height= "30px"></button>
You can try the following code:
background-image:url('url of your image') 10px 10px no-repeat
background
is the shorthand to set multiple background properties at once. background-image
is just to set the url.
– Gary
May 11 '15 at 15:43