Site Check. Flash of layered background image

HTML & CSS
1

Any ideas how to suppress the flash of blue background image across the header? It happens when you click through page to page.

http://plasticmailboxes.net/


//CSS
html {padding:0;margin:0;font-size:90%;}
body {margin:0; padding:5px 0 0 0; font-family:Calibri, Arial, sans-serif; font-size:1em; color:#333;background:url(header.gif) repeat-x;background:url(header.gif) repeat-x, url(spot2.gif) repeat-x;position:relative;}
a {color:#706f6f;text-decoration:none; }
.entry a, #menuFooterRecent a {color:#5e9cdb;}
h1 {font-size:220%;} h2 {font-size:170%;} h3 {font-size:140%;} h4 {font-size:140%;} h5 {font-size:100%;} h6 {font-size:75%;}

/* main structure */
.header {color:#ddd; margin:35px auto 0 auto; text-align:center; padding:0; width:100%; height:100px;}
.siteTitle a, .tagline {color:#555; width:820px; margin:0 auto; text-align:left;}
.siteTitle {background:url(sidebar.gif); margin:0 auto;}
.siteTitle a {color:#fff; padding:37px 0 0 260px; display:block; position:relative; z-index:6; height:63px; font-size:1.75em;}
.siteTitle {height:35px;}
.tagline {text-indent:200px; font-size:1.45em; margin:-35px auto 0 auto; height:100%; padding:0 30px 0 0;line-height:160px; background: url(header.png) left bottom no-repeat;width:930px;overflow:hidden;}
*+html .tagline{line-height:100px;}

.main {margin:0 auto 0 auto; text-align:left; width:950px; background:url(main_bg.png); padding:0;-moz-box-shadow:0px 10px 20px #ccc;box-shadow:0px 20px 20px #ccc;-moz-border-radius:12px 12px 0 0;border-radius:12px 12px 0 0;}
.main a img {border:none;}

.wrapper {background:url(background.png) 0 120px repeat-x fixed, url(background2.png) 0 40px repeat-x;}
.content {float:left;width:610px; padding:0 20px; margin:0; min-height:475px;overflow:hidden !important;}
2

Hi,

I didn’t see the flash in Firefox but I noticed it in IE the first time you go to a new page.

The problem is that you are painting an image on the body and then painting an image on an inner wrapper that has a transparent overlay to modify the appearance of the body background. While that’s a useful technique it does mean that both images have to be drawn and there will obviously be some delay especially with fixed backgrounds taking more effort to render than normal backgrounds.

A solution would be to combine both those images on the body to start with as a single composite image rather than having two images to create the effect. Of course you lose the flexibility of adding different transparent overlays.