2016-11-08 73 views
0

我试图使用全屏幕图像作为我的标题背景,但由于某种原因图像没有显示出来,我无法弄清楚我做错了什么。有人可以帮忙吗?该图像与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> 

回答

1

既然你已经给你的头股利(#header)没有明确的高度和漂浮它具有唯一的孩子,它缩短了与就像它没有内容。要么给它一个高度,要么将overflow:auto添加到它的CSS规则中。

+0

溢出担任我的形象出现了,但只是它的一部分出现在页面的顶部(绕菜单),我希望整个图像显示占据整个屏幕。我正在做一个向下滚动网站。 – Susana

+0

那么为什么不把它设置为身体的背景而不是div呢? – j08691

+0

因为我打算在页面上做单独的部分和背景,但我意识到我可以将整个背景放在photoshop中,并将它放在身体上,就像你说的。大声笑我很笨。非常感谢你的帮助! – Susana

0

同意@ j08691。 与HTML布局和CSS工作,它总是有帮助的,至少对我来说,加入下面的CSS:

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

,使我们可以清楚地看到是如何布局。

另外,如果你有与SRC图像大小的问题,你可以使用

background-size: cover;