CSS Button only showing background img only where text is

[smercer]

Hi all

I am trying to make a css button but the image is only showing where the text is and not displaying the whole image.

here is my code:

a.button {color: blue;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
background-image: url(BEC_Button_Purple.gif);
repeat: none;
line-height: 400%;
}

Thanks in advance

[MstrBob]

If you want the whole background image to display, you need to give the element the height and width of the image you are using. So, if the bg image is 200 pixels wide, and 50 pixels high, you'd use this:


a.button {
color: blue;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
background-image: url('BEC_Button_Purple.gif') top left no-repeat;
height:50px;
width:200px;
}

[Paul Jr]

You'll also need to add display: block;.