背景图像头不工作

问题描述：

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

答

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

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

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

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

答

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

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

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

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

background-size: cover;

背景图像头不工作

相关推荐