另一个网站背景上的 css 图像答案

【问题标题】：css image on top of another for website background另一个网站背景上的 css 图像
【发布时间】：2026-02-01 06:15:01
【问题描述】：

您好，我正在尝试在 1 中的另一个标签上制作和图像。

基本上我希望图像成为顶部的横幅，所以重复-x 然后在它下面我希望背景图像重复多次

像这样的

body
{
 background:url(banner.jpg); repeat: repeat-x;
 background:url(background.jpg); 
}

不是 100% 确定该怎么做...我想这说明了我的想法。

我可能还想要稍后在底部添加一些东西，所以在背景完成后我想要类似 background:url(footer.jpg) repeat: repeat-x;底部

【问题讨论】：

*.com/questions/423172/… -- 这个 SO 问题概述了您希望的 CSS3 实现，而无需轻松添加额外的标记。
谢谢它解释得很好:)

标签： css image

【解决方案1】：

我想这就是你所追求的。

http://jsfiddle.net/wpqDy/

html {
    height: 100%;
    width: 100%;
    background: url("bg.jpg") repeat 0px 3px;
}

body {
    background: url("bg_top.jpg") repeat-x top left;    
    height: 100%;
    width: 100%;
}

【讨论】：

我试过了，它确实有效，但我使用了 css3 方法。但是我玩过的那个 jsfiddle 工具，真的很酷:)
网站的利基市场更倾向于那些已经很会使用电脑并且是年轻人的人，所以我认为 IE6-IE8 不会是这样的问题，如果它不加载它仍然可以，因为我有一个体面的白色背景仍然使网站完全可用:) 我宁愿提倡 css3 以便更多人开始更新浏览器：P

【解决方案2】：

您需要将背景图片放在两个不同的容器上。也许是这样的：

<body>
  <div id="page">
    <div id="content">
      ...
    </div>
  </div>
</body>


#page
{
  background:url(background.jpg); 
}

#content
{
  background:url(banner.jpg); repeat: repeat x;
}

【讨论】：

不是一个选项。关于如何制作软件的模板不允许它......好吧，它会进行太多的编辑和查看文件来做到这一点。 minecraftforum.net 看看他们的背景...我想做类似的事情。我查看了他们的 css 并尝试了它，但它不起作用
也许您应该在问题中提及您奇怪的模板限制？

【解决方案3】：

CSS3 支持单个元素上的多个背景；这是比较广泛的支持，除了 IE

body
{
  background-image: url(banner.jpg), url(background.jpg);
  background-repeat: repeat-x, repeat;
}

【讨论】：

不用担心。您应该知道不支持多背景的浏览器的后备是显示nothing。如果你关心 IE6-8，你会想要另一种方法，或者通过modernizr.com