使用CSS的背景圖片

Question

我想在所有網頁中顯示背景圖片。我的身體CSS代碼是

body{
  background-image:url('image/silver.jpg');
  background-repeat:no-repeat;
  background-size:cover;
 }

我將此頁面包括在我的頁面中

<link rel="stylesheet" type="text/css" href="css/body.css">

但這現在無法顯示背景圖像。如果我在頭部包含body css代碼，它將顯示背景圖像。

Answer 1

CSS中的路徑是相對於CSS文檔的，而不是相對於您網站的根目錄的。

我建議將圖像（和所有樣式資產）與樣式表放在同一目錄中，以使路徑更簡單。

無論如何，將background-image屬性更改為此：

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

...如果您網站的文件系統是這樣的：

index.html
css/
    style.css
image/
    silver.jpg

我認為您的網站應類似於以下內容：

index.html
style/
    style.css
    silver.jpg
images/
    // put "content" images here (like a photo of yourself)...
    // ... not "style" images (e.g. a background gradient image).

Answer 2

確保正確指定圖像的路徑。 也許您的CSS文件與HTML文件位於不同的目錄中？