Question

出于某种原因，我网站上的每张图片都会加载我的背景图片。它工作，我没有改变任何与此有关，现在它不是。并且不能为我的生活弄清楚我做错了什么。我想我已经看了太久了。（图像名称正确并存储在根目录中）

该网站位于http://www.deadendwebcomic.com/index.html

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

Answer 1

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

调试这些问题的好工具是Firefox中的Firebug或Fiddler。

Answer 2

您的CSS文件是否在文件夹中？

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

使用../background.jpg可能就是您所需要的。

Answer 3

从background-image移除#home 因为您为background image定义了body & #home。

你的HTML看起来像这样

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

这就是#home image覆盖您的body image

的原因

Answer 4

尝试：

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

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

Answer 5

删除#home的背景属性，然后尝试并检查css中图像的路径

Answer 6

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

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

希望这有帮助，汤姆

我的网站上的背景图片无法加载

6 个答案: