无法通过“提交”按钮获取图像

Question

I am trying to get an image over my button, but I am not getting it. Here is what I have been doing.

<span id="schedule_button">
     <input type="submit" value="submit" 
             style="background-image:url(scheduler_button.gif); 
             font-size:0px; width:270 px; height:66 px" />
</span>

Where am I going wrong ?

Answer 1

There are two problems:

First :

Update: As King King brings to notice in comments, it's only the second problem which causes your troubles.

The input element is by default inline, so when you set font-size to 0px, it takes only that much space as required to display the value, which is very little,

Thus, it is necessary to set its display to block .

You might want to google "Inline vs Block elements."

Second :

You need to remove the space in width:270 px and height:66 px .

DEMO

CSS:

input {
    background:url('http://placehold.it/270x66');
    font-size:0px;
    width:270px;
    height:66px
}