中心DIV，两侧有不同的背景

Question

所以我正在创建一个网站，其所有内容都在一个居中的div中。

我使用margin-left和right设置为自动居中我的内容，在我的内容的左侧我想要一个纯白色背景，但是在右侧，我想重复一个图案背景。

也许我的思想不正常，但我今天想不出解决方案..

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

Answer 1

您可以使用其中一个3-column layout options。然后，只需将第三列的背景图像设置为您想要的任何内容，重复。

Answer 2

您可以使用3列布局技术并将右列和左列设置为不同的背景。其中一个描述here。

根据背景图片，您可能还可以执行以下操作： background：url（...）＃000 repeat-y right;

如果背景图片足够宽，可以从屏幕右侧到达中心内容下方，并且需要垂直重复，则可以使用此功能。但是，这会根据不同的屏幕分辨率而改变。

Answer 3

使用1680像素宽的图像，半白色和一半作为图案，并使用repeat-y垂直重复并居中...这将有助于您将来说您想要将背景更改为单个模式你不需要改变除了bg img文件以外的任何其他内容......

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

您还可以使用margin:0 auto;来集中您的内容区域 *您可以在photoshop

中轻松创建半白和半模式的背景图像