Why does this NOT work? CSS background image. Please Help :(

Hey folks, I have an issue which is really annoying me.

I am working on a site layout which was going fine until I seemed to get stuck on something which should be so easy.

Here is the link: http://www.imgd.co.uk/sites/yrm/

There are 3 thumbnail images which are inside an unordered list. This list items have a class name of ‘thumbcontainer’. I have attached the HTML code here:

<div id="homethumbs"><ul>
<li class="thumbcontainer"><img src="img/home-thumb1.jpg" alt="thumb1" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
<li class="thumbcontainer"><img src="img/home-thumb2.jpg" alt="thumb2" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
<li class="thumbcontainer"><img src="img/home-thumb3.jpg" alt="thumb3" /><span class="thumbtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin molestie ante. Nullam pretium. Aenean hendrerit sem et nulla. Maecenas nulla.</span></li>
</ul></div>

This is the CSS which im having issues with:

#homethumbs ul li.thumbcontainer {
background:url(img/thumb-bg.jpg);
background-repeat:repeat-x;
width:318px;
height:255px;
display:inline;
overflow: hidden;
float:left;
margin:1px;
}

I use the Mozilla web developer tools as add on and bizarrely the background shows up when I use the ‘edit css’ tab. Other than that my code doesn’t work.

Please can someone tell me what is wrong?