Header image jumps

I’m very new to web design and I’ve been sitting with this issue for longer than I care to admit, so I’m hoping someone can help.

When my pages initially load, the header image or div sits to the left and only jumps into the correct position when the page is completely loaded.

http://www.saf1.co.za

From my stylesheet:

.art-shapes
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
}
.art-object0
{
    display: block;
    left: 50%;
    margin-left: -900px; \\This bit allows me to position it horizontally
    position: absolute;
    top: 0px;
    width: 900px;
    height: 400px;
    background-image: url('images/logo.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 1;
}

Does anybody have an idea of why this would be and perhaps suggestions on how I can fix it?

Thanks in advance!