这是我第一次尝试非表格布局，我真的很挣扎。我确实花了几个小时进行试验和错误以及研究/阅读帖子和文章。因此，在有人说“询问并回答”并建议关闭此问题之前，请听我说完并提供一些建议。非常感谢。
我有两张图像，一张用于跨越页面顶部的标题，一张用于导航菜单，该导航菜单应位于左侧标题图像的正下方。标题将显示在标题图像的顶部(没有问题)，简单的无序列链接列表将显示在导航图像的顶部。显然，导航图像应该无缝显示，就像“连接”到顶部图像一样。我将使用 php include 将它们放在网站的所有页面上，在这两个图像和菜单正确定位后，我将把单个页面的内容放在标题下方和导航菜单的右侧。
我在这一点上的努力是试图弄清楚a)为什么导航图像根本不会显示，b)为什么菜单显示在页面中间。
如果我只是使用 img 标签作为导航图像，它会显示在页面上，所以我知道这并不是浏览器无法“找到”它......
导航图像是否因为位于 div 中而未显示？我在这里缺少什么？
我还需要它尽可能兼容跨浏览器(至少 IE7+、FF3.6+、Safari、Chrome)。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Website</title>
</head>
<body style="margin: 50%; padding; 0; width: 1000px; font-size: .8em; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;">
<div id="navMenu" style="background-image: url(images/navBackground.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 0px 200px;">
<ul>
<li>Home</li>
<li>Business Directory</li>
<li>City Government</li>
<li>Community Calendar</li>
<li>News</li>
<li>The Story of the Thing</li>
<li>The History of Somewhere</li>
<li>The Park</li>
<li>Churches and Schools</li>
<li>Recreation</li>
<li>Fire Department</li>
<li>Map</li>
<li>Contact Us</li>
</ul>
</div>
</body>
仅供引用，header.png 为 1000x200px，navBackground.png 为 200x500px
最佳答案
背景图像未显示的原因是您使用的是“background-attachment:fixed”。通过删除它，您的背景位置将相对于它所附加的容器。
另一个问题是导航位置。样式“margin: 50%”将采用页面宽度的百分比并将其应用到容器的所有 4 个侧面。通过设置静态宽度(以像素为单位)，或使用简写来正确设置边距，您应该会得到更理想的结果。这是我将使用“margin: 200px auto”的速记示例。这会将其排列在一个更好的位置。要了解有关速记的更多信息，请查看此页面:http://www.dustindiaz.com/css-shorthand/
此外，我建议外部化样式表以清理标记。基本上，您链接到文档头部的样式表，并使用类名称和 ID 来定位元素。查看这篇文章:http://www.tizag.com/cssT/external.php
关于css - 需要帮助使用 CSS 定位背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13459042/