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

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:

enter image description here

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?

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

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?

edited May 23 '17 at 10:32

Community

1
1

answered Jul 04 '14 at 19:35

roofdog

361
1
9

Thank you for the suggestion. It works fine. I just have to scale the fonts and it looks great! – DeKoss Jul 04 '14 at 19:44

cocco · Accepted Answer · 2014-07-04T19:46:43.987

1

background-size

sprite *

px

css

div{
 width:75px;height:45px;
 background:url(https://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(https://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(https://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/

edited Jul 04 '14 at 19:46

answered Jul 04 '14 at 19:41

cocco

16,442
7
62
77

Thank you for the alternative idea of using a div and a viewPort. Brilliant idea... – DeKoss Jul 04 '14 at 19:46
i like div's cause you need to add more css to show a anchor properly. – cocco Jul 04 '14 at 19:51
You are inspired today... Thanks for the other two examples... Both very useful... – DeKoss Jul 04 '14 at 20:45

Alexander O'Mara · Answer 3 · 2014-07-04T20:52:09.370

1

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('https://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;
}

edited Jul 04 '14 at 20:52

answered Jul 04 '14 at 19:49

Alexander O'Mara

58,688
18
163
171

Nice reuse of code... concise and efficient... Excellent. – DeKoss Jul 04 '14 at 20:51

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

3 Answers3