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.
Is there a way of doing this for a flexible / fluid site where everything is set in percentages?
Pure CSS would be nice or is some javascript required?
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!
You can make some pretty awesome buttons using just gradients/borders/shadows in css3.
Yep, if it was width only I'd be laughing as all the widths are set in %. But the height won't scale in line with the width ...
Got to use images for these buttons as they are icons that pertain to the client's products.
Can feel a slew of media queries coming on ! Ho hum ...