4

I'm starting to work on a website. I would like to have two background images. One would be a banner image at the top similar to the gray strip across the top of stack overflow's website. Then the other image is a image that I would have to create a textured background. This would be like the white space on this website but instead of a color it would be a repeatable image. Websites with the look i'm going for are pinterest.com, subtlepatterns.com, Facebook.com, etc...

I have tried many different things. I tried putting a background in the html tag in the css. That didn't work. I also tried putting two different background images in the body tag. That didn't work because it would just show the first one. I also tried creating the background in it's own class. But when I did that it wouldn't show up at all. Maybe I left something out of the html?

Currently I have Following code:

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;
}

This has created the main background image that takes up the whole screen like I want it to. Know if I could add the second one just at the top to only repeat horizontally then it'll be great!

Thanks in advance for the help.

4

5 回答 5

5

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

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

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

background-position: top, bottom;

等等。

更多信息@ css3.info

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

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

祝你好运！

于 2012-07-02T04:34:58.990 回答
2

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

<div style="background-image:url(../images/image1.png);">
    <div style="background-image:url(../images/image2.png);">
        <!-- div content -->
    </div>
</div>
于 2012-07-02T04:17:58.827 回答
2

Here's a jsFiddle I just made: 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>

Update: Revised jsFiddle with Hotlinkable repeatable background image.

于 2012-07-02T04:43:56.347 回答
1

您可以调整大小和位置。这里 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;
于 2012-07-02T04:23:58.893 回答
1

这将帮助您我可以使用 CSS 拥有多个背景图像吗？

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

于 2012-07-02T04:16:44.257 回答