Insert text above <input type="image">

Question

The below code is for adding a product to the basket.

Instead of just using an image as a buy button in the input, I would like to have an image or a fill in the background and HTML text above it.

<input border="0" src="/images/buy.png" type="image" />

This is the complete code:

<span class="BuyButton_ProductInfo">
    <table id="BUYSECTION">
        <tbody>
            <tr>
                <td valign="top" align="left">Count<br />
                    <input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
                </td>
                <td>&nbsp;&nbsp;</td>
                <td class="BuyButton_ProductInfo">Buy<br />
                    <input border="0" src="/images/buy.png" type="image" />
                </td>
            </tr>
        </tbody>
    </table>
</span>

Answer 1

Not sure I understand completely what you are trying to accomplish? Can you just set the display property in CSS?

#BUYSECTION input[type="image"] {  
  display:block;
}

Otherwise, can you elaborate? Maybe provide a JSFiddle link to show the issue?

EDITED

Is it that you want a clickable submit button, with a pattern or "button-like" fill, but to still have text at a different z-index "above" the button?

HTML:

<button type="submit">Buy</button>

CSS:

button{
  /* reset the button style properties */
  border:0;
  display:block;
  /* include the image and dimensions */
  width:50px;
  height: 20px;
  background:transparent url("images/buy.png") no-repeat 50% 50%;
  /* format the text */
  text-align:center;
  padding:5px;
  font-weight:bold;
  color:#333;
}