htmlcssbrowserbackground-imagebackground-repeat

Inconsistent CSS background-repeat count on different browsers

I'm using a repeating pattern as a background-image of a div:

<div style="width:200px; height:100px; background-image:url('test_pattern.png'); background-repeat:repeat-x;"></div>

test_pattern.png is 25 pixels wide, so I expect it to repeat 8 times in the div that's 200 pixels wide. This is exactly what I get on Safari. However, chrome repeats the pattern slightly more than 8 times. Even stranger, when I take a snapshot of the chrome page, it turns out that the div is 220 pixels wide, not 200! Is there anyway to make this consistent on all browsers?

Safari and chrome rendering:

Solution

  • I found the problem. Chrome's webpage was zoomed 110%. By resetting it to 100%, both Safari and Chrome render the div the same way.

    What's strange is that when I zoom the Safari webpage, the background pattern continues to repeat exactly 8 times. Chrome doesn't!