Repeat-y background image fades / shifts when zoomed

Question

Image disappears when magnified up to 40% in Firefox. Up to 50% increase, this is normal. However, with an increase of 40%, it simply disappears:

While in Chrome the image is still visible, but slightly offset, this happens at different zoom levels:

For Internet Explorer actually displays the expected result regardless of the increase!

What is a trident that works differently with webkit and gecko , and how to fix it?

Here is all the relevant code:

body { background-color: rgba(31, 59, 8, 1); } #main { z-index: 1; position: absolute; top: 113px; left: 50%; width: 900px; height: 100%; margin-top: 160px; background-image: url('http://i.stack.imgur.com/zZCB2.png'); background-repeat: repeat-y; margin-right: -50%; text-align: center; transform: translateX(-50%); } #main:before { content: " "; position: absolute; left: 0px; top: -113px; background-image: url('http://i.stack.imgur.com/7DE7i.png'); background-repeat: no-repeat; width: 900px; height: 113px; } #main:after { content: " "; position: absolute; left: 0px; bottom: -200px; background-image: url('http://i.stack.imgur.com/DVJAq.png'); background-repeat: no-repeat; width: 900px; height: 200px; } 

 <div id="main"></div> 

Answer 1

Make your body.png image 20px high or so will fix the problem. Sometimes repeating images are repeated. Should help with redrawing / flickering when loading an element.

In addition, when setting the "#main: before" parameter, the top of -112px instead of -113px got rid of the funky line in Chrome when zoomed in (at least for me).

Hope this helps.

Answer 2

I'm not sure, but I believe if you split the images and make 3 parts: :: before (white top, bottom shadow) :: header (red frame) :: after (white bottom, top shadow from the red box)

I hope this answer helps!