Forums

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

CrocoDillon

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 :)

jschweighofer

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

CrocoDillon

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

treehouse : what would you like to learn today?

Forums

[Solved] Make a fixed width button including background sprites responsive