loading page shifts

Question

(When loading) For some reason the content of my page shifts down really far while the background is stationary and then jumps back up to the appropriate placement. Anyone know why or how to fix this issue? I would really appreciate some help. Thanks!

Answer 1

Sounds to me like your background isn't really a background, but rather a layer with an image in it that you've stacked behind your content.

I generally find this to be a pain because if for some reason the z-index of the items get's confused (and it sounds like this is what's happening here), weird things will happen when the page loads.

I personally recommend you set the background image on the same block that all your content goes on. Consider the following

<div id="content">
    <div class="header"> </div>
    <div class="navigation"> <!-- Menu goes here --> </div>

    <div class="main"> <!-- Main content goes here --> </div>
</div>

#content { background: transparent url("Images/mybackground.png"); }

This will set the background on the page element that also houses your content. Assuming I've identified the problem corrently, this should solve your problem.

HTH