Make a fixed width button including background sprites responsive

[jschweighofer]

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

[jschweighofer]

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

[Author]

Posts