CODEWITHSUNDEEP
csshtmlbackgroundcenter-align
Conor
Conor

Reputation: 670

Centered DIV with defferent backgrounds on either side

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

Upvotes: 2

Views: 3361

Answers (3)

halocursed
halocursed

Reputation: 2495

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

Upvotes: 1

Tom Rudick
Tom Rudick

Reputation: 101

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.

Upvotes: 1

EndangeredMassa
EndangeredMassa

Reputation: 17528

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.

Upvotes: 5

Related Questions