このように、背景をフルサイズにしてみてください
.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%;
}
デモ
の周りに親要素がある場合は、配置して削除する.navlink
だけで、比例したままになります。比率を無視して親を埋めるだけにしたい場合は、両方を置くことができますheight:100%
height:70px;
height:100%
width:100%
編集
navlink
s がすべてであることがわかったので、の代わりに親の背景が変更されるため、<a>
持つことはできません(理由はわかりません)background-attachment: fixed
navlink
更新されたコード
.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');
}
コメントで提供したサイトの構造に基づいてデモを更新しました
次回質問を書くときは、関連する HTML を含める必要があります。これにより、問題の解決がはるかに簡単になります。
編集2
いくつか遊んだ後、これを使用してあなたが望むようにあなたのサイトを手に入れたと思います:
.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;
}