images background on link with css

[kevwood]

hi first post on here for a long while.

i am trying to add a background image to my links in a list on my page but i cannot get the image to show how i would like.

i am either going about it the wrong way or it simply cannot be done how i would like. either way here is the code that i am using at the min

#P_navigation li{
    list-style-type : none;
    margin : 0;
    margin-left : 0;
    background : url(../images/buttons/main_link_bg.png)-50px -15px no-repeat;
    width : 192px;
    height : 50px;
}

[gabrielcastillo]

First you want to give you anchor tag the background image, unless you want you ul or li tag to have it.

If you give the anchor tag the background, you can change the background with different states like, :hover, :active etc..

Here is what i would do.

#P_navigation li {list-style:none;}
#P_navigation li a {background:url('../images/buttons/main_link_bg.png') no-repeat -50px -15px; display:block; width:; height:; margin:0;}

you have to specify the with and height of the button size.

and if you are using button images with text, you will need to set: text-indent:-999em on the anchor tag as well.

[kevwood]

thanks for the reply. after a little playing about with different things i found this code work fine for me

#P_navigation li{
    list-style-type : none;
    margin : 0;
    margin-left : 0;
    background : url(../images/buttons/main_link_bg.png) no-repeat;
    width : 170px;
    height : 30px;
    text-align:center;
    padding-top : 5px;
}