After combining multiple images into one to reduce HTTP requests, I utilized background-position in percentage values to control which image was displayed. Since the width of the images is dictated by the parent element, using percentages rather than pixels for adjustment made sense.
The resulting merged image looked like this:
To see the final result, take a look at the first five images on .
Everything appeared as expected in Chrome. Upon inspection through the Console, the CSS selector can be seen.
However, when checked in Firefox (tested on FF 17.0.1 on Mac), it unexpectedly displayed the same image for all cases. In Firebug, the selector was present, but the attribute background-position-x: -200%; was missing. Even attempts to manually add it were futile, as Firefox removed it automatically. This hinted at Firefox considering the property as invalid.
The complete CSS code (using SCSS) is as follows:
.process {
width: 120px;
height: 120px;
max-width: 100%;
border-radius: 60px;
margin: 0 auto;
.image-block {
width: 90%;
height: 90%;
background-size: 500%;
margin: 0 auto;
position: relative;
top: 5%;
background-image: url('../img/process.png');
&:hover {
background-position-y: 100%;
};
}
&#process-idea .image-block {
background-position-x: 0;
}
&#process-design .image-block {
background-position-x: -100%;
}
&#process-code .image-block {
background-position-x: -200%;
}
&#process-launch .image-block {
background-position-x: -300%;
}
&#process-monitor .image-block {
background-position-x: -400%;
}
}