My background image on my website won't load

问题

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;
}

回答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.

回答2:

Is your CSS file in a folder?

The image references in your CSS file are relative to the location of the CSS file, not the location of your HTML page.

Using ../background.jpg may be all you need to do.

回答3:

Try:

background-image: url(/background.jpg);

This unequivocally references the image in the document root.

回答4:

remove background-image from #home because you define background image for both body & #home.

Your html is look like this

<body id="home" class="log wsite-page-index">

that's why #home image override your body image

回答5:

remove background property for #home and than try and also check the path of the images in your css

回答6:

alternatively, you could set #home to this:

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

Hope this helps, Tom

来源：https://stackoverflow.com/questions/7752653/my-background-image-on-my-website-wont-load