Grow your CSS skills. Land your dream job.

Make a fixed width button including background sprites responsive

  • # February 21, 2013 at 2:45 am

    Hey,

    I’m trying to get a link/an image button (including :hover and :active sprites) working on a responsive design, but I have no idea how to start.

    This is the code:

    a.order {
    text-indent: -9999px;
    display: block;
    width: 450px;
    height: 116px;
    background: url(“../images/button.png”) no-repeat 0 0;
    }

    a.order:hover {
    background-position: 0 -116px;
    }

    a.order:active {
    background-position: 0 -232px;
    }

    I’ve tried the max-width property, but as a result the background gets cut off.

    Any ideas on how to achieve this responsive, without creating a new set of images?

    Thanks,
    Jakob

    # February 21, 2013 at 4:15 am

    You can use [`background-size: 100% 300%;`](http://caniuse.com/#feat=background-img-opts) to make the background as wide and 3x as high as the link, then use:

    a.order:hover {
    background-position: 0 50%;
    }

    a.order:active {
    background-position: 0 100%;
    }

    Not sure what I did there… does it work? Edit: It should work, I just didn’t realize that percentage based positioning worked entirely different then length based positioning :)

    # February 21, 2013 at 4:50 am

    It did work, thanks! Funny though how the percentage thing works the opposite way :)

    # February 21, 2013 at 5:07 am

    You’re welcome. Yeah that did puzzle my mind for a little while :P

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".