Getting an image placed below a button - html

Question

I have been working with several solutions on the web and have not found anything that works.
I am trying to do something that should be simple. I am trying to have an image of a "button" underneath an actual button. When I do this, the image always overlaps the button itself.
HTML:
<div id="button"> <!-- Container for my image and button -->
<img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
CSS:
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}

Answer 1

Instead of using an actual image (which you won't be able to put behind anything), just make it a background image.
CSS:
#button {
height:30px;
padding:3px;
position:relative;
background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
background-repeat: no-repeat;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}

Answer 2

jsBin demo
Use a background image for #button if you want
<div id="button">
<input type="button" value="Roofing"/>
</div>
CSS:
#button {
width:90px;
height:30px;
padding:3px;
position:relative;
background: url(Images\buttonUnclicked.png);
}
#button > input {
position:absolute;
left:5px;
top:6px;
width: 86px;
}

Answer 3

If you adjust the number for the left and the top in the CSS, you can move your picture around. I called the picture #myImage in the HTML. Hope that helps.
CSS
#myImage{
position:absolute;
left:10px;
top:50px;
}
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
html
<div id="button"> <!-- Container for my image and button -->
<img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>