我的网站上的背景图片不会加载

由于某种原因，我的网站上的每张图片都会加载，但我的背景图片会加载。它在工作，我没有改变任何事情，现在不是。而且我的生活不能解决我做错了什么。我想我已经看了太久了。（图片正确命名并保存在根目录）我的网站上的背景图片不会加载

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

来源

2011-10-13 Nomiree

是一个文件夹在你的CSS文件？

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

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

来源

2011-10-13 10:22:07

到图像的路径是相对的CSS文件 - 所以，除非你的图片是在同一目录下的CSS文件，那么它不会加载（根据您的例子）

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

来源

2011-10-13 10:22:33 brodie

从#home 删除background-image因为你们两个body & #home定义background image。

你的HTML是这个样子

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

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

来源

2011-10-13 10:23:48 sandeep

尝试：

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

这毫不含糊地引用文档根的图像。

来源

2011-10-13 10:23:54

的删除背景属性#home比尝试，并检查图像的路径在你的CSS

来源

2011-10-13 10:28:39 punit

或者，你可以设置#home这样：

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

希望这有助于汤姆

来源

2011-10-13 10:34:12 Tisch

我的网站上的背景图片不会加载

回答

相关问题