Force background image to load first

[LEICJDN1]

My background image loads as part of my body style definition in CSS file as follows:

body {
position: relative;
color:#ffffff;
background:#000000;
margin: 0;
padding: 0;
background-image:url("ecggrid.jpg&quot
}

However, as my page loads, the text appears, followed by any images, then lastly the background image drops into place. This occurs for all the following pages using the same background image - even though I assume the image has been cached.

is there any way to force the background image to display first, followed by the text and then the images on the page?

Thanks

JDN

 

[pgtek]

hi move your image to the top

pgtek

 

[SPYDERIX]

Hi,

Use Javascript to pre-load the background, then it will show up first.

Hope this helps!

Nate

http://www.mainframe-webdesign.com

 

[LEICJDN1]

Move the image to the top of the body section (is that what you meant pgtek?) but no different.

Will look at how to preload with javascript, and let you know.

Thanks

 

[LEICJDN1]

Before I get lost in the world of Javascript, can I check one thing?

I assume you cannot 'embed' JS in a CSS file. In other words a JS preload solution must be added to each and every web page to ensure preloading of background picture.

Is there no way to utilise the efficiency of CSS to do this?

Cheers.

 

[LEICJDN1]

Hmmm. Should really have thought this question through before postng instead of splitting across posts!

in addition to the above, how can you force a background to stay 'resident' when switchin pages. All my pages will have the same background, and it would be nice if the background persisted between pages.

For an example see

http://www.tt-forum.co.uk/ttforumbbs/YaBB.pl

between sections or pages loading the background of fine pin stripes persists. Nice.

Anyone know how to do this. If javascript, any simple explanations / examples as I have yet to delve into this.

Thanks again,

JDN

 

[WizyWyg]

Uh, there's nothing in that link that does what you are describing. The background is just a standard repeating background.

 

[LEICJDN1]

It does for me! Maybe I am not explaining it correctly.

When I go to the link, the first thing to appear is the pin stripe repeating background. THen the page is populated with the images / menus / and text. If you then choose another section of the forum, it all clears, EXCEPT the background, and the new page repeats.

Thats what I am after. On my pages it all clears, then the text and images appear, and finally the background image last of all, dropping in behind the page text.

Is it because my background is one large image rather than a repeating image? Could this mean that it is slower to download and therefore appears last?

Is there a workaround for this or should I just ditch it and go for a small repeater?

Thanks.

 

[jamesmills]

The only thing that i can think of is that the background image is very very small in size so of course it is going to load first! As long as the background image is one of the first bits of code the browser looks at.

When i view the page it does load first, yes, however when clicking onto another page the screen goes blank and then loads the background etc all over again!

Hope this helps