Question

I am working on a new site and have a repeating background image that provides “continuous” flow of the page colors. Visually it blends perfectly with the content, however, when the page loads or when I switch to another page, there is a brief pause before the content loads when this background image is visible – causing a sort of “flashing” affect that is somewhat irritating.

Here is the css:

html                        { background: #fff url(../_images/bg_html.jpg) repeat-y center top; }

body                        { 
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: .875em; 
                        line-height: 1.333em; /* 16px / 12px = 1.333em */ 
                        color: #000; 
                        background: url(../_images/bg_body.png) repeat-x left top;
                        }
 #container { 
                        width: 980px;  
                        margin: 0 auto; 
                        background: url(../_images/bg_container.jpg) repeat-y left top; 
                        overflow: hidden; 
                        }

The background images are very small – 4k, so it seems to me that the page loading and transitions could be a lot more seamless. I would appreciate some insights that lead to a solution.

Thanks!

Answer 1

You can’t really avoid it, because it’s the browser trying to render the page as it loads. But you can reduce its impact, so that it’s not that noticeable.

For that, you should make the header a div with the exact dimensions from the beginning, and make it’s background color the same green as the image.

And the left menu should have the correct width from the beginning, so that you don’t see the grey color “shrink” as the page loads.

P.S. This is the one of the reasons why it’s recommended to specify the size of the images in the page. If you don’t do it, the browser “reflows” the page as they load, and creates a similar flashing effect.