Css 我网站上的背景图片赢得了'；t载荷

出于某种原因，我网站上的每一张图片都会加载，但我的背景图片除外。它是有效的，我没有改变任何与之相关的东西，现在它不是。我一辈子都不能找出我做错了什么。我想我已经看了太久了。（图像名称正确，并存储在根目录中）

该网站可在以下网址找到：

我的css如下：

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

---

你的CSS文件在文件夹中吗

CSS文件中的图像引用相对于CSS文件的位置，而不是HTML页面的位置

---

使用

。/background.jpg

可能就是您所需要做的一切。

图像的路径是相对于css文件的-因此，除非图像与css文件位于同一目录中，否则它不会加载（根据您的示例）

---

调试这些问题的一个好工具是Firefox或。

从

#home

因为您为

正文和#主页

都定义了

背景图像

您的html如下所示

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

这就是为什么

#主图像

覆盖您的

身体图像

尝试：

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

---

这明确地引用了文档根目录中的图像。

删除

#home

的背景属性，然后尝试检查css中图像的路径。

或者，您可以将#home设置为：

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

希望这有帮助， 汤姆