Thu, 2018-11-22 21:26
Hi everyone,
I'm fairly unfamiliar with css, and I can't seem to get this right.
My html page contains a few divs that have the same background-image. This image width is two times the width of a div and consists of two parts of equal size; each part has height: 335px and width: 134px. A div has the same size as an image part. I was able to switch between the parts by setting background-position either to "left" or to "right" (or to 0%/100%). So far, so good.
It appeared that two parts wasn't enough: I needed six of them, but with an image that contains six parts - with a width 3 times the width of the former image - all of a sudden I can't get background-position correct. "background-position: n%;" with n any number shows three parts of the image - and since aspect ratio is kept, they're displayed much smaller as well.
In short, this works:
background-image: url('../images/2partsimg.png');
background-position: 0%;
This should display exactly the same but doesn't:
background-image: url('../images/6partsimg.png');
background-position: 0%;
How can I get the same result with the six parts image?
Thanks!
Cooz
