A texture that repeats on the left and another that repeats on the right

问题

I don't know how to do this, but I would like to have 2 repeating textures, one that repeats to the left and one to the right.

instead of:

#header {
   background-image : Url('My_Two_Textures_Combined.png');
   background-repeat : repeat-x; /*Which repeats my joined textures a long the x axis*/
}

I would like:

#header {
   background-image : Url('My_Left_Texture');
   background-repeat : repeat-x-left; /*Which would ideally repeat my texture to the left on the x axis*/
   background-image : Url('My_Right_Texture');
   background-repeat : repeat-x-Right; /*Which would ideally repeat my texture to the right on the x axis*/
}

I hope there's a way to do this because I think it would look nice on my website. I will try to look at other ways to do this, like with pseudo commands or something. If I find anything I will post it here!

回答1:

You could use css selectors like :before and :after, and place one of your backgrounds in #header:before {} and one in #header:after {}.

回答2:

:before and :after is a good solution, but you can always take a look at multiple backgrounds with CSS3. Obviously, support is also a little limited: > IE8, but this would do the trick too.

background-image: url(left.png), url(right.png);
background-position: left bottom, right bottom;
background-repeat: no-repeat;

回答3:

Compose your header of two divs side by side. Each with its own texture.

回答4:

you can do it like this: http://jsfiddle.net/9V2vE/9/ (replace the background-color with an image)

来源：https://stackoverflow.com/questions/12711776/a-texture-that-repeats-on-the-left-and-another-that-repeats-on-the-right

标签

html

css

background-image

repeat