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

Question

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!

Answer 1

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

Answer 2

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