• # February 21, 2013 at 2:45 am


    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?


    # February 21, 2013 at 4:15 am

    This reply has been reported for inappropriate content.

    You can use background-size: 100% 300%; 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

    This reply has been reported for inappropriate content.

    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.