如何有两个背景图像。一个是顶部横幅，第二个是带纹理的背景？答案

【问题标题】：How to have two background images. One a top banner and the second a textured background?如何有两个背景图像。一个是顶部横幅，第二个是带纹理的背景？
【发布时间】：2012-07-02 12:11:06
【问题描述】：

我开始在网站上工作。我想要两张背景图片。一种是顶部的横幅图像，类似于堆栈溢出网站顶部的灰色条带。然后另一个图像是我必须创建纹理背景的图像。这就像本网站上的空白区域，但不是颜色，而是可重复的图像。具有我想要的外观的网站是 pinterest.com、sealpatterns.com、Facebook.com 等...

我尝试了很多不同的东西。我尝试在css的html标签中放置背景。那没有用。我还尝试在 body 标签中放置两个不同的背景图像。那没有用，因为它只会显示第一个。我还尝试在它自己的类中创建背景。但是当我这样做时，它根本不会出现。也许我在 html 中遗漏了一些东西？

目前我有以下代码：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
background-image:url(../images/absurdidad.png);
background-repeat:repeat;
}

这已经创建了占据整个屏幕的主背景图像，就像我想要的那样。知道我是否可以在顶部添加第二个以仅水平重复，那就太好了！

提前感谢您的帮助。

【问题讨论】：

Can I have multiple background images using CSS?的可能重复

标签： css image background banner

【解决方案1】：

这是我刚刚制作的一个 jsFiddle： jsFiddle Banner and Repeatable Background

CSS：

body{
    background-image:url("http://silviahartmann.com/background-tile-art/images/grunge-background-seamless-repeating.jpg");
    background-repeat: repeat;
    color: white;
}

#headerBackground{
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: gray;
}

#headerContent {
    background-image: url(http://lorempixel.com/700/50/city/5);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    text-align: center;
}

HTML：

<div id="headerBackground">
    <div id="headerContent">Other Header Content</div>
</div>

更新： 修订 jsFiddle，带有可热链接的可重复背景图片。

【讨论】：

你是个天才！！！谢谢！谢谢！效果很好！我唯一改变的是#headerContent background-repeat 到repeat-x。这太棒了！我自己做不到！ :)
谢谢。请通过接受此答案来完成 Stackoverflow 流程，因为它可以解决您的问题。达到 15 个代表点后，如果这也适用，您还可以执行 Upvote（此答案很有用）。

【解决方案2】：

大小和位置可以调整。这里image2会重复。

background:url(image1.jpg),url(image2.jpg);
background-size:80px 60px;
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-repeat:no-repeat,repeat;
background-position:top left,center center;

【讨论】：

【解决方案3】：

使用逗号，你可以在同一个元素中有多个背景：

background-image: url('first'), url('second');

同样的规则适用于其他样式：

background-position: top, bottom;

等等。

更多信息@css3.info

如果您想要广泛的浏览器支持，多个 DIV 是实现此目的的唯一方法：

<div class="one">
  <div class="two">
  </div>
</div>

祝你好运！

【讨论】：

我从来不知道你可以做背景位置：顶部，底部；很高兴知道。非常感谢您的帮助！

【解决方案4】：

我知道的唯一方法是让多个包装标签与背景相关联。例如：

<div style="background-image:url(../images/image1.png);">
    <div style="background-image:url(../images/image2.png);">
        <!-- div content -->
    </div>
</div>

【讨论】：

我把它放在了 div 标签中，但它不起作用，但这是因为我错过了它必须是一个包含“样式”的包装标签的事实。这很棒！非常感谢！
嗯，其实不一定，我通过插图的主要观点是放置一个外部 div 和一个内部 div，每个都有图像。我在这里使用样式标签对图像进行硬编码，但您也可以使用 css 类或 id，如果您要在代码中插入大量图像，这实际上是一种更好的做法。

【解决方案5】：

这将帮助你Can I have multiple background images using CSS?

您可以使用 CSS3 提供多个背景或一些标签技巧来使其工作。

【讨论】：