Skip to main content


This topic contains 5 replies, has 0 voices, and was last updated by  simoncmason 6 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #39026


    So I have an image link which I want to reverse out on hover. Easy using CSS sprites but, then I need to set the width and height in px.

    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?


    It seems like it wouldn’t be an issue.. Read this.




    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:

    a.rollover-image {
    background: url ('my30x60image.jpg')
    background-position: 0 0;
    a.rollover-image:hover {
    background-position: 0 30px;

    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!



    Hi Chris,

    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 …

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star