The image disappears when zoomed out to 40% on Firefox. Up until zoom 50%, it is fine. However at zoom 40%, it just vanishes:
Whereas in Chrome the image is still visible but slightly misaligned, this happens at different levels of zoom:
For once Internet Explorer is actually displaying the expected result regardless of zoom!
What is trident doing differently to webkit and gecko , and how can I patch 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>
Making your body.png image 20px tall or so will fix the issue. 1px repeating images act strange sometimes. Should help with redraw/flickering while the element is loaded as well.
Also, setting the "#main:before" to have a top of -112px instead of -113px got rid of the funky line in Chrome when you zoom in (at least for me).
Hope that helps.
I am not sure, but i belive if you split the images and make 3 parts: ::before (white top, with bottom shadow) ::header (the red box) ::after (White bottom, with top shadow from the red box)
I hope that this answer helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.