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

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