3种不同的CSS背景

Question

I'm wondering if the following is possible with CSS.

I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be

I've been toying with the following but I can't seem to be able to position any of the backgrounds.

#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
          url("bg2.png"), 
          url("bg3.png");
background-position: 10px 10px,
          170px 10px, 
          750px 10px;
background-repeat:repeat-x;
}

Here's a fiddle: http://jsfiddle.net/5fo054L2/1/

Any idea what I'm doing wrong?

Answer 1

You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.

 .blog { width: 100%; height: 100%; background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png"); background-position: 0px 170px, 0px 100px, 0px 10px; background-repeat: repeat-x; } 

Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/

Note that the vertical height (of text in your example) will limit the amount of the background images you see.

Answer 2

您还可以制作三个图像文件，将它们放置在其他所有文件之下，并使用绝对定位进行设置。