Trying to create a CSS Sprite in WP

[kloy]

I’m trying to use CSS sprites for my navigation in the header .php file in wordpress.
This is my first attempt at making a CSS sprite and the first time I’m using a wordpress template..

I’m trying to use background image in the CSS for link and hover states –I think my CSS is OK, but it’s not working.

I have a feeling I need to do something with the html or php in the .php file but I’m not exactly sure what. Here’s what I have, that’s not working…

Code:

[noahgelman]

You don’t need to restate the css properties on the :hover part, they stay there. All you need on the :hover part is background-position. And I believe in order to use background position you you need to state 2 positions for the image background. For example

li.toplist #homebtn a { width: 88px; height: 46px; background-image: url(images/topnav_01.png) top center no-repeat; }

li.toplist #homebtn a:hover { background-position:0px -46px; }

[Author]

Posts