How to scale down CSS background-image when using various background-positions? - html

Question

I use three shots of a button on an image to give impression of a button in action.
Normal / Hover / Active.
Here is an image of that:
The CSS code for picking the right image for the right state is here:
#btnSet1 {
position: absolute;
left: 200px;
top: 100px;
}
.btn1 a {
padding: 0px;
text-decoration: none;
opacity: 0.7;
}
.btn1 a.link1 p {
position: relative;
text-align: center;
left: -10px;
top: 20px;
color: white;
font-family: sans-serif;
text-decoration: none;
text-shadow: 5px 5px 5px #111;
opacity: 1;
}
.btn1 a.link1:link {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0 0;
}
.btn1 a.link1:hover {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -90px;
}
.btn1 a.link1:active {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -180px;
}
.btn1 a.link1:visited {
display: block;
height: 90px;
width: 144px;
background: url(../images/btn3.png) no-repeat 0px -270px;
}
#tHeader {
position: absolute;
top: 100px;
left: 300px;
}
I made these images to be large, because I need to scale them, occasionally. The HTML image element can be used to stretch any image, but I only show a region of the total image with the CSS style. So, for the sake of clarity, let's call each button face being shown a view... so, how can I stretch the view of each button face in code, since the x y refer to unscaled metrics of the image?

Answer 1

background-size
sprite *
px
css
div{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0px 0px;
background-size:75px 135px;
text-align:center;
line-height:45px;
}
div:hover{
background-position:0px -45px;
}
Demo
http://jsfiddle.net/katPx/
percent
css
div{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
background-size:100% auto;
text-align:center;
line-height:45px;
}
div:hover{
background-position:0% 50%;
}
Demo
http://jsfiddle.net/katPx/1/
this last one scales automatically based on the container size.
use a class
.btns{
width:75px;height:45px;
background:url(http://i.stack.imgur.com/8yNbR.png) no-repeat 0% 0%;
background-size:100% auto;
text-align:center;
line-height:45px;
}
.btns:hover{
background-position:0% 50%;
}
html
<div class="btns">whatever</div>
demo
http://jsfiddle.net/katPx/2/

Answer 2

How about using CSS background-size?
.btn1 a.link1:link {
background-size: 144px 90px;
}
This post has more info - Set size on background image with CSS?

Answer 3

You can achieve this by using percentage-based background-size and background-position. Here is a basic working example you can adapt to your needs.
JSFiddle
a {
display: block;
background-image: url('http://i.stack.imgur.com/8yNbR.png');
background-size: 100%;
background-position: 0 0;
background-repeat: no-repeat;
}
a:hover {
background-position: 0 50%;
}
a:active {
background-position: 0 100%;
}
a.big {
width: 150px;
height: 90px;
}
a.small {
width: 75px;
height: 45px;
}