背景圖像CSS

-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的，例如，它工作得很好。我怎樣才能解決這個問題？

來源

2014-09-19 user3798144

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

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

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

用下面的替換你的風格：因爲你的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

來源

2014-09-19 12:12:56

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

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

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

-2

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

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

來源

2014-09-19 12:15:35 Krogertek

-1

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

如上

來源

2014-09-19 12:16:53

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

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>

來源

2014-09-19 12:20:26

回答

相關問題