Question

I am trying to display 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

Answer 1

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;
}