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:
background: url(“../images/button.png”) no-repeat 0 0;
background-position: 0 -116px;
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?
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:
background-position: 0 50%;
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 :)
It did work, thanks! Funny though how the percentage thing works the opposite way :)
You’re welcome. Yeah that did puzzle my mind for a little while :P
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".