How come this image is off by 1px?

HTML & CSS
1

How do I fix this?

Code: https://jsfiddle.net/sa6re45b/

I never changed this code ever, it’s been working all this time.

First time I see that the image is off.

.jacketb,
.wrape {
  background: url("https://i.imgur.com/hibXwFj.jpg") no-repeat 0 0;
  background-size: 102.307% 203.571%;
}

2

The image is 266px x 342px so the area (.jacketb) to show the upper half should be 171px.

Now that height of .jacketb happen to be 174px, it should be 171px to fir the image.

Also the background-size could better be the actual image’s size than the given percentage that always suffer from rounding errors. I think that is the reason for the off position.

Either the image or the container has changed.

Issue solved. :wink:

1 Like
3

I sometimes have problems with my images being off as well. Really weird when that happens out of Nowhere Land lol :laughing:

4

When you’re using percentage for dimensions, you always risk the browser’s zoom level to add extra rounding errors as well.

When using percentage it’s good to make sure the rounding error is accounted for. In this case it was not even when the browser zoom was other than 100%.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.