I am having trouble getting a background image to work!

It appears in my index.php page, but not in other web pages from my "pages" directory...


Here is my directory/file structure...
Code:
components
	body_header.inc.php

css
	components.css

images
	debbie_160x45.png

pages
	article_index.php
	howto_index.php
	interview_index.php

index.php

In every web page in my site I have this code to include my Page Header...
Code:
	<!-- BODY HEADER -->
	<?php	require_once('components/body_header.inc.php');	?>

Here is body_header.inc.php...
Code:
	<!-- PAGE HEADER -->
	<div id="pageHeader">

        <!-- Display Company Logo -->
				
		<h1 id="homePage">
			<span></span>Debbie's
		</h1>

And here is components.css...
Code:
h1{
	width: 220px;
	height: 36px;
	position: relative;
}

h1 span{
	background: url(/images/debbie_160x45.png) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

Why is background: url(/images/debbie_160x45.png) no-repeat; not working??

My understanding is that in HTML, a forward slash represents the Web Root and therefore whether the page referencing this stylesheet is in the Web Root itself (e.g. "index.php") or in another sub-directory (e.g. "pages/article_index.php") the pages should be able to find my background image?!

What is going on??

Thanks,



Debbie