Background Image not fully displayed

I am trying to display开发者_JAVA百科 a background image for a button. The button is saved as .png and used in JSP page. The problem is that, when button gets displayed, it only displays one half of the image, i want the whole image to be displayed.

CSS -

#btn {
background: url(../images/btn-blk.png) no-repeat;   
width: 100%;
}

JSP -

<input type="submit" value="Add" id="btn" />

What could the problem be? How to make the image display the whole width instead of left half alone?

-Thx in Advance

---

1. Are you sure that you posted corect css code? It should be "#btn" not "btn".
2. Since you know your width of btn-blk.png, why don't you put it in css, instead using width:100%? Attach here the image btn-blk and maybe we will be able to understand better what you want to do.

---

You need to set the size of btn to be the size of your image in pixels. CSS has no idea how big your image is.

Because BTN is an inline element, width:100% refers to the width of the button, not your background image.

You need something like:

btn {
background: url(../images/btn-blk.png) no-repeat;   
width: 50px;
height:20px;
}

---

Check with a DOM examiner (FireBug, Chrome's internal one, or something like that) and see that your <input> tag really is big enough.

As a FYI: the "width: 100%" does not apply to the background image size, but to the element's size, relative to its parent.

---

There are other ways of putting an image in a form that may be more appropriate:

1. <input type="image" src="../images/btn-blk.png">
2. <button><img src="../images/btn-blk.png"></button>