Baggrunde i menuer
Man kan også lægge baggrunde ind i knapper og lister, og ved at ændre billedets position, kan man lave en roll-over effekt:
HTML
<ul>
<li><a href="http://www.google.com">Home</a></li>
<li><a href="http://www.google.com">Products</a></li>
<li><a href="http://www.google.com">About</a></li>
</ul>
CSS
#menu li {
float:left;
margin:0 0.25em;
}
#menu li a {
background-image:url(../img/button.png) ;
background-position:top center;
display:block;
height:50px;
width:200px;
text-decoration: none;
text-align:center;
padding-top:30px;
}
#menu li a:hover {
background-image:url(../img/button.png) ;
background-position:0 -100px;
}
#menu li a:active {
background-image:url(../img/button.png) ;
background-position:0 -100px;
}