Question

So I’m creating a website that has all of its content in one centered div.

Im using margin-left and right set to auto to center my content, on the left hand side of my content I want a solid white background, however on the right hand side, I want to repeat a pattern background.

Maybe my mind just isn’t working properly, but I cant think of a solution for this today..

-------------------------------------------
|  white    |   content       |  pattern  |         
|    bg     |   centered      |    bg     |
|           |                 |           |
|           |                 |           |
-------------------------------------------

Answer 1

Use a 1680px wide image with half white color and half as your pattern and use repeat-y to repeat it vertically and centered…This will help you in the future say you want to change your background to a single pattern you won’t have to change anything else but the bg img file…

body{
    background:url(../images/bg.jpg) fixed;
    background-repeat:repeat-y;
    background-position:top center;
}

You can also center your content area using margin:0 auto;
*You can easily create the background image with half white and half pattern in photoshop