weird CSS behaviour

Question

I installed a template on blogger, but it's not showing the background image.

in the main blog here you can see that there is no background image (the orange one)

now visiting this one which is the blog I do test the template on first, shows normally the background.

the weird result is that if you go back to the first website now and refresh it, the background will be shown??

how can that happen between 2 different domains? they both reference the same image but why it loads on website1 only after loading website2?

this is the CSS associated

#body_top {
background:transparent url(http://4.bp.blogspot.com/_66wIGDjagHk/Sh1HpWevpII/AAAAAAAAAeo/L2BR0NJ6kB4/s1600/bgr_body_top.png) no-repeat scroll 0 0;
width:100%;
}

Answer 1

Maybe some resource takes extremely long to load? Then visiting the second site causes it to be loaded to a cache - which acts as a reordering.

I'd suggest inspecting this behaviour with firebug - Network tab.

EDIT: weird, the firebug shows that server responds with 404

Appears like HTTP and not CSS bug. The server responds with 404 when connection is already open (keep-alive issue?) and returns the image otherwise.

OK, it's the referer. It should be blogspot.com subdomain.

Maybe blogspot has some sort of file size limit which disallows hot-linking of large files from other sites. The background_top seems somewhat larger than other files.

Here, look at blogspot.com referrer restrictions: http://www.google.com/support/blogger/bin/answer.py?answer=57527