-1

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:

Jarir
  • 327
  • 3
  • 10
  • Might be worth trying [rems or vh](https://snook.ca/archives/html_and_css/vm-vh-units) instead of pixels, though I can't answer why it's rendering differently as is. – Reticulated Spline Aug 02 '17 at 18:19
  • It's slightly possible that there is padding being applied to the elements, and the browsers are laying out the box differently. Perhaps try adding `box-sizing: border-box;` which should make the browsers layout the padding in the same way (just in case that has something to do with the issue). – JakeParis Aug 02 '17 at 18:24
  • vh doesn't fix this. rem improves, but doesn't fix it (the repeat count is closer, but not exactly the same). Adding box-sizing and padding has no effect. – Jarir Aug 02 '17 at 19:12
  • Did you include a css reset stylesheet? – Rob Monhemius Aug 02 '17 at 20:36
  • I just added a css reset, but that didn't make a difference. I don't think the problem is with CSS. It's more likely with the way the browsers deal with screen resolution, image resolution, dpi, etc. – Jarir Aug 02 '17 at 20:52

1 Answers1

0

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!

Jarir
  • 327
  • 3
  • 10
  • That is an interesting result. I was thinking you could create a workaround. It should be possible to replicate your specific background with css's `linear-gradient`. Or maybe make a background-image to be used without repeat-x and use `background-size: 100% auto`? – Rob Monhemius Aug 02 '17 at 21:51
  • Actually set `background-size: 12.5% auto`. and keep your code as it was :). – Rob Monhemius Aug 02 '17 at 22:02
  • Thanks RMo, these suggestions work. However, the example I provided is just a simple test. The final product uses more complex image patterns and animated div width. – Jarir Aug 02 '17 at 22:18