Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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!

share|improve this question
    
Does it happen with 1.375 instead of 1.4, too? –  Sam Hocevar Apr 14 '12 at 14:02
    
With 1.375 works great on webkit, but not in Firefox. Check: jsfiddle.net/vkpuY/2 (Why 1.375? Thanks!) –  user15350 Apr 14 '12 at 14:09
    
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. –  jhocking Apr 14 '12 at 15:26
    
I assume you did set the borders to 0, yes? –  Lohoris Apr 14 '12 at 15:30
1  
Incidentally, this question isn't about game development, so I'm voting to migrate this to StackOverflow. –  jhocking Apr 14 '12 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.