views:

336

answers:

3

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     |
|           |                 |           |
|           |                 |           |
-------------------------------------------
+5  A: 

You could use one of the may 3-column layout options. Then, just set the third column's background image to be whatever you want, repeated.

EndangeredMassa
+1  A: 

You could use a 3-column layout technique and set the right and left columns to the different backgrounds. One such described here.

Depending on the background image, you may also be able to do something like: background: url(...) #000 repeat-y right;

This would work if the background image is wide enough to reach from the right side of the screen to underneath your center content and needed to be repeated vertically. However, this would change based on different screen resolutions.

Tom Rudick
+1  A: 

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

halocursed
Perfect! It may not be the cleanest solution, but it saved me from having to completely rewrite the structure of my page.My 3000px wide bg/pattern is still under 2kb so filesize wasnt an issue.
Conor
I use something similar for my website to add a drop shadow..Trust me it is well used solution gamespot, gametrailers use similar techniques to add shadows to their contents<looked into their code :)>
halocursed