Pre Load Background Image?

[drooh]

I have a website that has a background image.

The problem that I am having is that the text appears 1st, sometimes well before the background image. I have tried the javascript preload image but it does not seem to work in this case. I have reduced the file size of the background image, however dial-up users still see the text about 5-10 sec before the background image appears.

Is there a javascript or css code that can force the background image to load 1st before the text is displayed?

Any help on this would be very much appreciated. Thanks! :)

[texmex]

That behaviour is not unusual. IMHO it's usually for the best. It allows your users to start reading content before the page is fully loaded. I think this is why browsers developers have built in this behaviour.

No matter how impressive your background image is, your users (especially those with slow connections), will not thank you for forcing them to wait for it to load, before they can even start to read what your page is all about.

If the background image is that important, then make it an IMG element in it's own right. As far as browsers are concerned, background images are pretty low priority in the general scheme of things.

[drooh]

If I make the background image an img element of its own, how will I lay text and content over it?

Can you explain a little more. thanks!

[texmex]

Place the image using position absolute, then it doesn't interfere with the flow of the document.
Make sure you put it in your HTML document BEFORE the text that is going to sit on top of it. Otherwise it will sit on top of the text (instead of the other way around).

<img src="whatever.jpg"
style="position:absolute;
left:0px;
top:0px">