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