CODEWITHSUNDEEP
cssjsp
sara
sara

Reputation: 415

Background Image not fully displayed

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

Upvotes: 0

Views: 3084

Answers (4)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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

Upvotes: 0

Neil
Neil

Reputation: 55402

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>

Upvotes: 0

stefanz
stefanz

Reputation: 1326

  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.

Upvotes: 1

Henrik Paul
Henrik Paul

Reputation: 67723

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.

Upvotes: 0

Related Questions