css - My background image on my website won't load

Question

For some reason, every image on my website will load but my background image. It was working, I didn't change anything to do with that, and now it's not. And can't for the life of me work out what I've done wrong. I think I've been looking at it for too long. (The image is named correctly and is stored in the root directory)

The website can be found at http://www.deadendwebcomic.com/index.html

My css is as follows:

body {
  background-image:url('background.jpg');
  background-repeat:no-repeat;
  font-family:Arial, Helvetica, sans-serif;
  color:000;
  font-size:12px;
}

h1
{
    font-size:30px;
    padding-bottom:10px;
    padding-top:0;
}

h2 
{
    font-size:16px;
    font-style:italic;
}

h3
{
    font-size:14px;
    font-weight:bold;
    font-style:italic;
    margin-bottom:0px;
    padding-bottom:0px;
    display:inline;
}

table
{
    border:0px;
}

td
{
    padding-bottom:0px;
    margin-bottom:0px;
    padding-right:15px;
    vertical-align:bottom;
}
#topnavigation
{
    border:0;
    float:left;
    position:fixed;
    top:150px;
    left:300px;
    height:80px;
    width:800px;
    margin:0 auto;
}

#leftnavigation
{
    border:0;
    float:left;
    position:fixed;
    top:320px;
    left:100px;
    height:580px;
    width:180px;
    margin:0 auto;
    padding:0;
}

#container
{
    background: url("creamtexture.jpg");
    border:0;
    float:left;
    position:fixed;
    top:320px;
    left:310px;
    height:557px;
    width:773px;
    margin:0 auto;
    padding:0;
}

#content
{
    background:none;
    border:0;
    float:left;
    position:fixed;
    top:320px;
    left:315px;
    height:500px;
    width:730px;
    margin:0 auto;
    padding:20px;
}

#comicnav
{
    border:0;
    float:left;
    position:fixed;
    top:820px;
    left:300px;
    height:500px;
    width:775px;
    margin:0 auto;
    padding:0;
}

#horline
{
    background: url("horline.gif");
    width:853px;
    height:21px;
    float:left;
}

#verline
{
    background: url("verline.gif");
    height:580px;
    width:23px;
    float:right;
}

#home
{
    background: url("home.png");
    height:205px;
    width:205px;
    position:fixed;
    top:101px;
    left:80px;
    border:0;

}

img
{
    border:0;
}

.about
{
    display:block;
    width:137px;
    height:90px;
    background: url("about.gif") bottom;

}

.about:hover
{
    background-position: top;
}

.aboutactive
{
    display:block;
    width:137px;
    height:90px;
    background: url("aboutactive.gif") bottom;

}

.aboutactive:hover
{
    background-position: top;
}

.characters
{
    display:block;
    width:191px;
    height:110px;
    background: url("characters.gif") bottom;
    float:left;
}

.characters:hover
{
    background-position: top;
}

.charactersactive
{
    display:block;
    width:191px;
    height:110px;
    background: url("charactersactive.gif") bottom;
    float:left;
}

.charactersactive:hover
{
    background-position: top;
}

.contact
{
    display:block;
    width:137px;
    height:90px;
    background: url("contact.gif") bottom;

}

.contact:hover
{
    background-position: top;
}

.contactactive
{
    display:block;
    width:137px;
    height:90px;
    background: url("contactactive.gif") bottom;

}

.contactactive:hover
{
    background-position: top;
}

.deadend
{
    display:block;
    width:160px;
    height:110px;
    background: url("deadend.gif") bottom;
    float:left;
}

.deadend:hover
{
    background-position: top;
}

.deadendactive
{
    display:block;
    width:160px;
    height:110px;
    background: url("deadendactive.gif") bottom;
    float:left;
}

.deadendactive:hover
{
    background-position: top;
}

.launchparty
{
    display:block;
    width:207px;
    height:110px;
    background: url("launchparty.gif") bottom;
    float:left;
}

.launchparty:hover
{
    background-position: top;
}

.launchpartyactive
{
    display:block;
    width:207px;
    height:110px;
    background: url("launchpartyactive.gif") bottom;
    float:left;
}

.launchpartyactive:hover
{
    background-position: top;
}

.purchase
{
    display:block;
    width:169px;
    height:110px;
    background: url("purchase.gif") bottom;
    float:left;
}

.purchase:hover
{
    background-position: top;
}

.purchaseactive
{
    display:block;
    width:169px;
    height:110px;
    background: url("purchaseactive.gif") bottom;
    float:left;
}

.purchaseactive:hover
{
    background-position: top;
}

.turnback
{
    display:block;
    width:258px;
    height:50px;
    background: url("turnback.gif") bottom;
    float:left;
}

.turnback:hover
{
    background-position:top;
}

.latest
{
    display:block;
    width:258px;
    height:50px;
    background: url("latest.gif") bottom;
    float:left;
    text-align:center;
}

.latest:hover
{
    background-position:top;
}

.keepgoing
{
    display:block;
    width:258px;
    height:50px;
    background: url("keepgoing.gif") bottom;
    float:left;
}

.keepgoing:hover
{
    background-position:top;
}

Answer 1

The path to your image is relative to the css file - so unless your image is in the same directory as the css file then it wont load (as per your example)

A good tool for debugging these issues is Firebug in Firefox or Fiddler.