0

i want to make it so that my website will load as it should but in the same time the background image (which is all over the page) will do z-index=9999 and after 2 seconds will go z-index=-1;

the point is that the visitors will see the background image for 2 seconds and then the background image wil go back to the backgrond as it should be....

the most important thing is that while this happens i dont want to the script to run and do the background thing without the site being loaded from the server...i want this to happen toghther somehow without reveling the content yet(just after the 2 seconds when the backgrond goes back)

any idea?

user1102152
  • 61
  • 1
  • 8
  • What do you mean by "the site being loaded from the server"? There could be variable amounts of time for images to load, but all of the html (minus any ajax requests) will get to the browser at the same time. – Stefan H Oct 02 '12 at 22:38
  • Why not adding a layer with z-index 999999 with a copy of the background or something else? Then you just make it hidden. – Alfabravo Oct 02 '12 at 22:39
  • Did you consider a standard jquery preloader? http://stackoverflow.com/questions/476679/preloading-images-with-jquery - your images will be the largest resource, so once all those are done loading you can drop the loading image that is z-indexed. – Kai Qing Oct 02 '12 at 22:41

1 Answers1

0

First off, background images don't get a z-index. Their host object could have a z-index for the whole object, but not just the background image.

Secondly, you can create an image, put it in a div and place that div over the top of everything else with z-index and absolute position. Then, when everything else is loaded, you can change the z-index of that image.

Or, alternately, you can put all your content in one master div, mark that div as display: none until everything is loaded and then change it to display: block.

jfriend00
  • 683,504
  • 96
  • 985
  • 979