2014-09-19 201 views
-2

我想設置一個HTML頁面的背景圖像,但圖像不出現。該圖像與html文件位於相同的文件夾中。背景圖像CSS

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style/indexstyle.css" > 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
</head> 
<body> 
<heading>Overground Effective</heading> 

<nav class="nav"> 

     <ul> 
      <li><a href="index.html" style="color: black;">Home</a></li> 
      <li><a >About me</a> 
       <ul> 
        <li><a href="aboutme/whoami.html">Who am I</a></li> 
        <li><a href="aboutme/whatido.html">What I do</a></li> 
        <li><a href="aboutme/whatilike.html">What I like</a></li> 
       </ul></li> 
      <li><a href="aboutme/myskills.html">My skills</a></li> 
      <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li> 
     </ul> 
    </div> 
</nav> 
</div> 

和CSS文件:

body{ 
background-image: url("/treewithroots.jpg"); 
background-size: cover; 
min-height: 100%; 
background-position: right; 
} 

當我圖片上傳到Dropbox的,例如,它工作得很好。我怎樣才能解決這個問題?

+1

嘗試:刪除'/'從URL – Sam1604 2014-09-19 12:10:24

+1

@ Sam1604 - 這是行不通的。它與樣式表不在同一個目錄中。 – Quentin 2014-09-19 12:11:18

+0

同樣的事情發生,圖像仍然沒有出現。我試圖更改文件夾,但它不起作用。 – user3798144 2014-09-19 12:11:27

回答

0

用下面的替換你的風格:因爲你的css文件在風格文件夾和你的圖像是相同的文件夾作爲html文件。

body{ 
    background-image: url("../treewithroots.jpg"); // change this 
    background-size: cover; 
    min-height: 100%; 
    background-position: right; 
} 

假設你的文件夾結構如下圖所示:

index.html 
treewithroots.jpg 
style/indexstyle.css 
+0

這工作謝謝你,雖然我不明白爲什麼我必須使用「../」時,圖像是在與HTML文件相同的文件夾 – user3798144 2014-09-19 12:18:11

+0

@ user3798144 - 由於URL是從樣式表中解析的,而不是HTML文檔。 – Quentin 2014-09-19 12:18:37

+0

,因爲你的圖像不在你的CSS所在的同一個文件夾中。 – 2014-09-19 12:19:36

-2

你最好使用完整的圖像的URL。這樣,當你放置你的css時,你不需要關心目錄結構。

background-image: url("http://www.yoursite.com/treewithroots.jpg"); 
-1
background-image: url("../treewithroots.jpg"); 

如上

0

我認爲你必須給予適當的路徑,此圖像使用。 嘗試這樣

body{ 
 
background-image: url("http://xsights.files.wordpress.com/2014/06/branding-logo.jpg?w=624"); 
 
background-size: cover; 
 
min-height: 100%; 
 
background-position: right; 
 
}
<heading>Overground Effective</heading> 
 

 
<nav class="nav"> 
 

 
     <ul> 
 
      <li><a href="index.html" style="color: black;">Home</a></li> 
 
      <li><a >About me</a> 
 
       <ul> 
 
        <li><a href="aboutme/whoami.html">Who am I</a></li> 
 
        <li><a href="aboutme/whatido.html">What I do</a></li> 
 
        <li><a href="aboutme/whatilike.html">What I like</a></li> 
 
       </ul></li> 
 
      <li><a href="aboutme/myskills.html">My skills</a></li> 
 
      <li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li> 
 
     </ul> 
 
    </div> 
 
</nav>