我的網站上的背景圖片不會加載

由於某種原因，我的網站上的每張圖片都會加載，但我的背景圖片會加載。它在工作，我沒有改變任何事情，現在不是。而且我的生活不能解決我做錯了什麼。我想我已經看了太久了。（圖片正確命名並保存在根目錄）我的網站上的背景圖片不會加載

該網站可以在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

我的網站上的背景圖片不會加載

回答

相關問題