Question

我开始在网站上工作了。我想有两个背景图片。一个是顶部的横幅图像，类似于堆栈溢出网站顶部的灰色条带。然后另一个图像是我必须创建纹理背景的图像。这就像这个网站上的白色空间，但它不是一种颜色，而是一个可重复的图像。我想要的网站是pinterest.com，subtlepatterns.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;
}

这创建了主要的背景图像，占据了我想要的整个屏幕。知道我是否可以在顶部添加第二个只能水平重复然后它会很棒！

提前感谢您的帮助。

Answer 1

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

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

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

background-position: top, bottom;

等等。

更多信息@ css3.info

如果您需要广泛的浏览器支持，多个DIV是唯一的方法：

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

祝你好运！

Answer 2

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

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

Answer 3

这是我刚刚制作的一个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。

Answer 4

这将有助于您Can I have multiple background images using CSS?

您可以使用CSS3来提供多个背景或一些标记技巧，以使其发挥作用。

Answer 5

您可以调整的大小和位置。这里将重复图像2。

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;

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

5 个答案: