Puzzled why my background-image is not showing up

I’m using this:

<body id="bodyColor">
<div style="background-image: url('images/loading.png') no-repeat top left;">
	<div id="output"></div>
</div>
  1. The background-image loading.png is large gray text on transparent.
  2. The body’s bodyColor is black or white.
  3. The output div will show a full-screen image over the smaller background-image when it loads from the Internet.

However, the background-image is not showing up at all against either black or white. Google Tools doesn’t show any errors. I tried without the quotes: url(images/loading.png) and there wasn’t any difference.

What am I missing?

Try using the background property instead. Background-image is for the image only.


background: url('images/loading.png') no-repeat top left;

This works:

<style type="text/css">
	#bodyColor {
		padding:0;margin:0;
		background: url(images/loading.png) no-repeat top left;
	}
</style>
</head>

<body id="bodyColor">
	<div id="output"></div> 

Patche: I posted my second post before seeing yours. Thanks for helping!