headerbg {

Question

我正在尝试使用导航栏建立一个网站。来自css的我的图像/背景没有出现在我的index.php中。任何人都可以帮我这个吗？

我的编码如下：

的index.php

<html>
<head>
<title>xxx</title>
<link rel="stylesheet" type="text/css" href="admin.css">
</head>

<body>
<div id="headerbg">
  <div id="wrapper">
  <div id="navMenu">

<ul>
<li><a class="BANNER" href="index.php">Home</a>
</li> <!-- end main LI -->
</ul> <!-- end main UL -->

</div> <!-- end navMenu -->
</div> <!-- end wrapper div -->
</div> <!-- end headerbg -->

<div id="footerbg">
  <div id="content">Content for  id "content" Goes Here</div>
Content for  id "footer" Goes Here</div>
</body>
</html>

admin.css

#headerbg {
    background: url('../Images/header.png') no-repeat fixed center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#footerbg {
    background: url('../Images/footer.png') no-repeat fixed right;
    background-repeat: no-repeat;
}

问题：

1）我无法在我的headerbg id和footerbg id中看到图像。

2）如何将内容中的文本与下一行对齐？

Answer 1

仅在IE9 +中支持background-size（当然还有FF和chrome）如果使用IE8或IE7 - 它不会工作。您可以为headerbg css添加宽度和高度。当然，检查图像路径（可能是错误的）：

headerbg {
```
background: url('../Images/header.png') no-repeat fixed center;
background-repeat: no-repeat;
background-size: 100%;
height:100px;
width:100px;
```
}

Answer 2

您的图片路径错误。我检查了它改变图像路径。它工作正常

您可以检查将图像放入html文件的同一目录中，并为src = only文件名添加扩展名

See the js fiddle link

#headerbg {
    background: url('http://www.bedlamrealty.com/wp-content/uploads/2010/04/chain-link1.jpg') no-repeat fixed center;
    background-repeat: no-repeat;
    background-size: 100%;
}

#footerbg {
    background: url('http://www.bedlamrealty.com/wp-content/uploads/2010/04/chain-link1.jpg') no-repeat fixed right;
    background-repeat: no-repeat;
}

Answer 3

你的标题必须有height属性，或者它必须有一些内容才能给它一些高度，所以尝试添加这个css

#headerbg {
height:3em; //change it accordingly.
}

修改

您可以申请替代方案。使用img标记制作背景图片。

图像不出现在<div>标签</div>中

3 个答案:

headerbg {