Centered DIV with different background on both sides
So I'm creating a website that has all of its content in one centered div.
I am using margin-left and right to auto-center my content, on the left side of my content I want a solid white background, however on the right side I want to repeat the background.
Maybe my mind just isn't working as expected, but I can't think of a solution for this today.
-------------------------------------------
| white | content | pattern |
| bg | centered | bg |
| | | |
| | | |
-------------------------------------------
source to share
Use an image that is 1680px wide with a semi-white color and half as your drawing and use repeat-y
to repeat it vertically and centered ... This will help you say in the future that you want to change the background to one swatch that you don't have to change. except for 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 with margin:0 auto;
* You can easily create a semi-white and half-pattern background image inphotoshop
source to share
You can use one of the 3-column layout options . Then just set the background image of the third column to whatever you like, repeat.
source to share
You can use the three column layout method and set the right and left columns to different backgrounds. One of the ones described here .
Depending on the background image, you can also do something like: background: url (...) # 000 repeat-y right;
This will work if the background image is wide enough to reach from the right side of the screen to your center content and needs to be repeated vertically. However, this will change based on different screen resolutions.
source to share