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!