No replies
Cooz's picture
Last seen: 12 weeks 5 days ago
Timezone: GMT+1
Joined: 2018-11-22
Posts: 1
Points: 2

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?