I am trying to create a repeating background. I have a main DIV with a grid of small 16x16 DIVs. I am trying to scale the main DIV in CSS; when the small DIVs simply have a red background color everything works great, but when there is a background image in the small DIVs then borders become visible between the tiles.

This image explains the problem: http://cl.ly/FpNW/o

Check the HTML in these examples:

With BG-COLOR: http://jsfiddle.net/pTLXw/

With BG-IMG: http://jsfiddle.net/vkpuY/

Does anyone know what is causing this problem and how to fix it? If it is not possible to fix while using DIV, is there another way to do this?

Thanks you so much!

  • \$\begingroup\$ Does it happen with 1.375 instead of 1.4, too? \$\endgroup\$ Commented Apr 14, 2012 at 14:02
  • \$\begingroup\$ With 1.375 works great on webkit, but not in Firefox. Check: jsfiddle.net/vkpuY/2 (Why 1.375? Thanks!) \$\endgroup\$
    – user15350
    Commented Apr 14, 2012 at 14:09
  • \$\begingroup\$ I've edited your question to have the text of your question. Explain your problem/question in the posts you make here, not hidden behind a link. \$\endgroup\$
    – jhocking
    Commented Apr 14, 2012 at 15:26
  • \$\begingroup\$ I assume you did set the borders to 0, yes? \$\endgroup\$
    – o0'.
    Commented Apr 14, 2012 at 15:30
  • 1
    \$\begingroup\$ Incidentally, this question isn't about game development, so I'm voting to migrate this to StackOverflow. \$\endgroup\$
    – jhocking
    Commented Apr 14, 2012 at 15:30

1 Answer 1


It's a result of the different scaling methods used by the different browsers. I'd generally stay away from using that scaling, but if you want your current problem solved, have the tiles overlap slightly.


You must log in to answer this question.