CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
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?
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:
background-size: 100% 300%;
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.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed