Thanks but that only deals with the position of the background image in the sprite – and assumes you have some content to give it space on the page.
My problem is I want to use a background image as the content to create an image based button with a rollover. To do this I’d normally set the width and height of the anchor so it creates some space on the page, something like this:
But how do I make that work with percentages? If I fix the width and height of the buttons it will break the design of the container and I can’t set it in percentage as I don’t know what percentage the height will end up at.
Hopefully I’m missing something really obvious here and enlightenment awaits!
As far as I know, you can’t have a variable width/height if you’re trying to use an image. There’s ways to make a simple sprite that will allow you a variable width, but if you want the height to change as well, then you’d have to use pure css.
You can make some pretty awesome buttons using just gradients/borders/shadows in css3.