CSS Background image positioning on text link rollover

I have text links that I am trying to use a background image with on rollover (link.gif is transparent, linkhover.gif is the rollover image).

The code I have below is working except the positioning is not.

.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}

.navlink:hover {
background-image: url('graphics/linkhover.gif');}

Solution

Try making the background take up the full size, like this

.navlink {
    background: url('graphics/link.gif');
    height:70px;
}

.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

Demo

If you have a parent element around .navlink, then you can just put height:100% and remove height:70px; and it will stay proportional. If you want to disregard proportion and just have it fill the parent you can put both height:100% and width:100%

EDIT

Since I found out the navlinks are all <a>: you can't have background-attachment: fixed because it makes the parent's background change instead of the navlink's (for what reason I don't know)

Updated code

.navlink {
    text-align:center;
    background: url('graphics/link.gif');
    background-repeat: no-repeat; /* This applies to :hover as well */
    background-position: center; /* This applies to :hover as well */
    text-decoration: none; /* To remove the underline */
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
}

Updated demo based on the structure of your site which you provided in the comments

Next time when writing your question you should include the relevant HTML, that would have made it much easier to help you with the problem

EDIT 2

After some playing I believe I got your site the way you want it using this:

.navlink {
    padding-top:30px;
    text-align:center;
    background: url('graphics/link.gif');
    text-decoration: none;
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-position: center -55px;
    background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
    text-decoration: none; 
}