Drawing priority of HTML elements defined via CSS

I would like to prevent the web page rendering like this

1. Fill the whole background with #51a025
2. Tile images/bg.png
3. Tile content_bg.png

Those steps can be quite visibly distracting, and depending on the browser/machine can take a while

So my question is, "How can I prevent that effect?"

The content is generated from php and mysql so I'm guessing the drawing is linked to the database interaction.

Here's the CSS

body {
 font-size: 75.5%; /* Resets开发者_Python百科 1em to 10px */
 font-family: Tahoma, Arial, Sans-Serif;
 background:#51a025 url('images/bg.png') repeat-x 0 0;
 color: #000;
 text-align: center;
 }

#page {
 background: url('images/content_bg.png') repeat-y 0 0;
 text-align: left;
 }

How big are bg.png and content_bg.png? If the files are large then the delay you're seeing is likely just how long they're taking to download.

You could maybe try OptiPNG or a similar tool to get the file size down.

You cannot force one css rule to evaluate before another. Generally, they are evaluated in the order they are placed in the file/tag. CSS is really, really, really fast, even at it's slowest it loads faster than the human eye can detect. So my answer is you can't prevent this effect, but it doesn't matter because CSS is super fast.

The content is generated from php and mysql so I'm guessing the drawing is linked to the database interaction.

Nope, the content is generated server-side and delivered to your browser as HTML. The drawing is done purely by the browser (client-side).