背景IMG不工作

-1

我想要在我的網頁頂部的菜單部分獲得背景...我已將其上傳到www.ra3manifesto.co.nf 我想要一個徽標，h1和菜單酒吧被設置在我放在我的圖像文件的背景上。我試圖把這個背景下面的CSS代碼：背景IMG不工作

.hoofd { 
background: url("includes/images/achtergrond.png"); 
}

似乎是沒有錯的網址（證明這一點我已經把圖像，我想第二個div容器內使用，並清楚地顯示在網頁上），但仍然沒有出現背景圖像！我已經打破了我的大腦在這個最後時刻，誰還會來拯救我:(

來源

2016-04-21 WAINGRO

你確定你在元素中拼寫正確的類嗎？ – Carcigenicate

請包括所有相關代碼，以便我們看到它如何使用 –

嘗試背景圖像。 http://www.w3schools.com/cssref/pr_background-image.asp 檢查類名稱是否正確檢查圖像路徑網址是否正確 – NewUser

-1

使用絕對圖像路徑：

.hoofd { 
background-image: url("/includes/images/achtergrond.png"); 
}

來源

2016-04-21 14:34:11

-1

，我認爲是不對的你的CSS樣式嘗試：

。

.hoofd { 
    display:block; 
    background: url("../includes/images/achtergrond.png") 
}

來源

2016-04-21 14:34:34 Mimmo

你有一個錯誤的路徑，「/」缺少

它應該是：

.hoofd { 
    background: url("/includes/images/achtergrond.png"); 
}

來源

2016-04-21 14:35:59 user2519032

你爲什麼要包含其他代碼？ –

我剛剛修正了他網站上的代碼，所以他可以清楚地看到問題所在。 – user2519032

rgba，重複，滾動所有與這個問題無關 –

可能Pathing的問題

一個使用背景圖片這種方式是，你需要確保路徑是正確的，因爲相對路徑將是從哪裏CSS聲明是由相對的問題。

如果您在實際的HTML文件中定義了此樣式，那麼您可能希望使用絕對URL（但是，如果您的網站易於移動，這可能是一種易碎的方法），以避免出現像這樣的：

/* You can use an absolute path to ensure that the proper file is always used */ 
background-image: url("http://www.yoursite.com/includes/images/achtergrond.png");

否則，如果你有這樣的風格在.css文件中定義的，你可以肯定，這是相對於它的任何路徑將始終是一致的。只是確保從你的CSS文件圖像的相對路徑是正確的：

/* Your path may vary, but ensure that it is relative from your CSS file */ 
background-image: url("../../includes/images/achtergrond.png");

使用開發工具（F12）來解決

考慮使用內部開發人員工具（F12）的瀏覽器檢查有問題的元素（通過右鍵單擊>檢查元素）。這應該允許您查看background-image屬性指向的確切位置，以驗證它是否正確。

其他風格問題

另外一個問題是，你需要確保元素，您正在使用的background-image財產上實際支持，並會表現出來。請考慮使用樣式像那些在scaisEdge's response建議，以確保正確元素顯示圖像：

/* Adding these other styles may help the actual image "appear" 
    if this is not a pathing issue */ 
.hoofd { 
    background: url("{your-path-here}") 
    background-size: cover; 
    background-repeat: no-repeat; 
    height: 100%; 
    width: auto; 
    display: block; 
}

來源

2016-04-21 14:39:56

Upvoted，但一個小小的更正：絕對*路徑*以/開頭 - 絕對URL包含主機名。兩者都可以正常工作，但在網站移動的情況下URL更脆弱（顯然）。 – kander

好點。我更新了這些措辭並添加了關於脆弱性的記號。 –

的問題是，圖片路徑相對於CSS文件的位置決定。如果您在瀏覽器中的「檢查」或「開發者工具」看，你會發現它試圖加載以下：

http://www.ra3manifesto.co.nf/css/includes/images/achtergrond.png Failed to load resource: the server responded with a status of 404 (Not Found)

人們賦予這裏的建議是正確的：要麼讓它絕對路徑（即：以「/」開頭），或者首先遍歷一個目錄（「../」）。您的測試工作原因是因爲在網頁上進行測試時，網址會相對於網頁解析 - 而不是相對於CSS文件。

來源

2016-04-21 14:41:38 kander

背景IMG不工作

回答

相關問題