CSS Button only showing background img only where text is

liunx

Guest
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 advanceIf 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;
}You'll also need to add display: block;.
 
Back
Top