CSS背景图片在文本链接翻转上的定位

Question

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');}

Answer 1

You should make a sprite, put the images next to each other in one file and adjust the background-position on :hover. The CSS should be like this:

.navlink {
    background-image: url('image');
    background-position: top left;
}

.navlink:hover {
   background-position: top right;
}

You can achieve a cool effect when adding an CSS3 transition. The image will then slide to the rollover state!

Answer 2

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 navlink s 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; 
}