Home/ Questions/Q 6148107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T19:13:18+00:00

I have a div with background image which contains 3 colors of the same

  • 0

I have a div with background image which contains 3 colors of the same icon

icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing: div with icon

All works fine utill I zoom the page (ctrl + mousewheel) – than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div: zoomed

Screens are from IE but it looks even more broken on iPad…
Any thoughts about what is causing this and how to fix it?

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.

    I shift the icon (background-position: top/center/bottom)

    Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.

    There’s nothing you can really do to prevent things sometimes being “1px off” when you zoom.

    For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.

    • 0