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

【问题标题】：My background image on my website won't load我网站上的背景图片无法加载
【发布时间】：2019-08-09 05:10:34
【问题描述】：

由于某种原因，我网站上的每张图片都会加载，但我的背景图片除外。它正在工作，我没有改变任何与此有关的东西，现在不是。并且不能为我的生活找出我做错了什么。我想我已经关注它太久了。（图片命名正确，存放在根目录下）

可以在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;
}

【问题讨论】：

标签： css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试：

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

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

【讨论】：

【解决方案4】：

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

你的html是这样的

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

这就是为什么#home image 覆盖你的body image

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

希望这会有所帮助，汤姆

【讨论】：