Background colour flash before image shown

On my site shown below the background colour is set to #000066
Sometimes when i first go to the site i see this blue background colour flash then the actual photo i am using for the background appears "cloud"
www.theremotedoctor.co.uk

Is there a work around so the blue flash does not happen ?
I deleted it to see what would happen but then i see a white flash before the cloud background.

Any advice would be great.

Thanks

Until the background image loads the browser will show the background color. Because of that, generally one chooses a background color that's closest to the color of the background image, and/or chooses a background image that's small in byte size, often something that can repeat without looking too repetitive. Or that looks OK not repeated, yet is still small in byte size.

An alternative is to have a preload script that will make sure the entire page or at least the images associated with it that are important to its immediate appearance are loaded before (there are at least two types here) the page itself is either 1.) loaded or 2.) revealed. While it's waiting for that to happen it shows some sort of progress bar or loading image to the user.

Another is to have a simpler plainer first page for the website, assume that most users will go there first the first time, preload important images there so they will be ready when the more complex pages are loaded, returning visitors should already have these images cached.

And of course, you can just live with it. It's pretty common these days with sites using ever more complex backgrounds and not everyone having ultra high speed connections. The faster the connection, the less likely there will be a flicker or the shorter it will be.

Different browsers are different as well. IE is (last I checked, a while ago) generally the worst at this.

Thanks i will now change it to a colour similair to the cloud.
Such an easy answer yet i did not think of it.