标题的 HTML 背景图像答案

【问题标题】：HTML background image for title标题的 HTML 背景图像
【发布时间】：2013-11-14 05:05:09
【问题描述】：

我正在寻找在页面中包含标题的方法，我遇到了这个网站：（见下图）它完全符合我的要求，但我不知道如何实现它。我遇到的问题是顶部只有一个标题图像，而没有重复到底部。我在主 div 上使用了 css background-image:url(image) 但存在重复图像问题。任何有关此问题的帮助或见解将不胜感激。

编辑：我需要其余的背景重复直到结束。我认为让背景的其余部分成为单独的图像可能是解决方案的一部分，但我不知道是否可以将标题图像 div 强制到同一层。同样，任何见解都是有价值的，因为我是 HTML 和 CSS 的新手。这也是我能找到的最好的示例网站，如果你被冒犯了，请用更好的示例进行编辑。谢谢！

【问题讨论】：

background-repeat:no-repeat
从任何优秀的在线教程中学习 CSS 和 HTML 的基础知识会更好。对于这种情况，此链接可能会对您有所帮助Link-CSS Background property
谢谢你！我正在尝试做与您的链接示例中相同的事情，仅使用图像而不是颜色。它的工作方式相同吗？
@PrasanthKC，你的回答让我找到了这个网站css3.info/preview/multiple-backgrounds，它提供了如何做我需要的工作示例。请发表您的评论作为答案，以便我接受并给予您信任。如果您不这样做，我将在今天晚些时候发布答案。再次感谢！
@JaaMills 很高兴听到我的评论对您有所帮助。我的评论已作为答案发布。

标签： html css image background background-image

【解决方案1】：

你可以使用下面的 CSS 来完成它，

#elemId
{
 background: #00ff00 url('testimage.jpg') no-repeat top left;
}

希望对你有帮助

【讨论】：

【解决方案2】：

background-repeat:no-repeat;

这是不重复背景图像的 css 技巧。

如果你不知道这一点，你怎么能进入这个网站？

来自你的链接

body {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  font-family: Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 0;
}
#wrapper {
  background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
  margin: 0 auto;
  min-width: 980px;
  overflow-x: hidden;
}
#overview-wrap {
  background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}

这些是像这样的嵌套标记：

<body>
    <div id="wrapper">
        <div id="overview-wrap"></div>
    </div>
</body>

就是这样。

ps。我添加了您要显示的屏幕截图。您可以删除（现在无用的）链接吗？

【讨论】：

我可能需要重新表述我的问题...我不希望 TITLE IMAGE 重复。其余的背景（在示例网站中是纯黑色，但在我的网站中是实际图像）应该重复直到页面结束。是的，我知道......我不会发布我没有考虑过的问题。我对 HTML 还是很陌生，所以更深入地了解背景选项或 div 选项会很有帮助。
那个网站实际上是由美国海军陆战队制作的，但它是我能找到的最好的例子。为清楚起见，已对问题进行了编辑。