I have a div, where I will put an icon from a file with a load of icons in it. I also need to scale the icon. So I use the normal width, height, background-position, background-size to sort it all out.
<div style="background: url(images/touchbuttons.png); width: min(10vw, 10vh); height: min(10vw, 10vh); background-position: -min(10vw, 10vh) 0px; background-size: 700% 200%;" >
</div>
The graphic has 7 icons wide and 2 icons high. (Hence the 700% and 200% on background-size.)
I calculate the width and height of the div based on 10% of the minimum of vw or vh.
No worries so far. To get the top left icon in the png file, background-position: 0px 0px; works perfectly.
Question: So how do I get the second icon in the png, ie 2nd to the right on the top row? When I do background-position: -min(10vw, 10vh) 0px;, which is the obvious choice, it gives the same result as background-position: 0px 0px;. It does not seem to be doing the calc. Why?