在CSS中添加背景圖像

我試圖在我的單頁產品網站上的第一個面板中添加背景圖像。出於某種原因（我無法弄清楚）我的背景圖片不會加載。請幫忙！在CSS中添加背景圖像

HTML：

<!-- panel 1 --> 
<div class="header"> 
<h3> Introducing the </h3> 
<h1> Vespa Tribute </h1> 
<p> Scheduled for release in June 2016, this limited edition scooter will only  be produced 250 times. Enter your email below to be partnered with a Vespa representative who will ensure that you stay updated and informed about how be part of this exclusive venture. </p> 
<input type="text" name="emailaddress" placeholder="Email address"> 
<button type="button">Get exclusive Info</button> 
<img src="images/vespa1.png" alt="vespa" />

CSS：

/*梁板*/

.header { 
background-image: url('images/image1.png'); 
background-size: cover; 
background-repeat: no-repeat; 
}

來源

2015-11-02 Samantha Yanow

如果您在新選項卡中打開圖像，圖像是否加載？服務器訪問日誌是否顯示有用的東西？ –

你的代碼看起來很好，它很可能只是無法找到圖像。確保圖像存在，image/image1.png是與CSS文件相關的正確路徑。 – Pete

你的div沒有關閉，但我假設你只是沒有貼上整個代碼。

您的CSS代碼是HEADER PANEL - 這是否意味着您沒有將它作爲單獨的樣式表使用？如果它在單獨的工作表中，則必須指定與樣式表位置有關的路徑，而不是HTML。

你是從你自己的機器上工作還是在實時服務器上測試這些代碼？你是在CMS還是其他這樣的附加組件中使用自己的CSS庫？

我建議通過從地址欄加載它來確保Nathan建議的是正確的文件路徑。

接下來我會嘗試確定，如果您正在現場測試此代碼的確切文件路徑 - 「http://server.com/images/image1.png」

之後，如果它仍然無法正常工作，文件路徑是正確的，嘗試打開所有的鏈接樣式表並找到與'img'元素相關聯的任何值 - 一次一個地刪除它們，同時刷新您的頁面以查找衝突的代碼。

對我來說它看起來很好，否則，如果這些建議沒有解決，我會感到驚訝。

來源

2015-11-02 03:31:00 Joel

在CSS中添加背景圖像

回答

相關問題