背景圖像頭不工作

我試圖使用全屏幕圖像作爲我的標題背景，但由於某種原因圖像沒有顯示出來，我無法弄清楚我做錯了什麼。有人可以幫忙嗎？該圖像與html和css文件在同一個文件夾中。背景圖像頭不工作

CSS

body { 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    } 

#header{ 
    background-image:url(headerbackground.png); 
    width: 100%; 
    height: auto; 
    } 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    float: right; 
    }

HTML

<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, width=device-width"> 
<title>Test</title> 

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

</head> 

<body> 

<header> 
<div id="header"> 

<ul class="col-4"> 
    <li><a href="#">SOBRE</a></li> 
    <li><a href="#">TRABALHOS</a></li> 
    <li><a href="#">CONTACTO</a></li> 
</ul> 

</div> 
</header>  

</body> 

</html>

來源

2016-11-08 Susana

既然你已經給你的頭股利（#header）沒有明確的高度和漂浮它具有唯一的孩子，它縮短了與就像它沒有內容。要麼給它一個高度，要麼將overflow:auto添加到它的CSS規則中。

來源

2016-11-08 16:42:07 j08691

溢出擔任我的形象出現了，但只是它的一部分出現在頁面的頂部（繞菜單），我希望整個圖像顯示佔據整個屏幕。我正在做一個向下滾動網站。 – Susana

那麼爲什麼不把它設置爲身體的背景而不是div呢？ – j08691

因爲我打算在頁面上做單獨的部分和背景，但我意識到我可以將整個背景放在photoshop中，並將它放在身體上，就像你說的。大聲笑我很笨。非常感謝你的幫助！ – Susana

同意@ j08691。與HTML佈局和CSS工作，它總是有幫助的，至少對我來說，加入下面的CSS：

border: 1px solid green; //or any color you like

，使我們可以清楚地看到是如何佈局。

另外，如果你有與SRC圖像大小的問題，你可以使用

background-size: cover;

來源

2016-11-08 16:52:37 RizkiDPrast

背景圖像頭不工作

回答

相關問題