两侧具有不同背景的居中 DIV答案

【问题标题】：Centered DIV with defferent backgrounds on either side两侧具有不同背景的居中 DIV
【发布时间】：2009-10-09 02:54:53
【问题描述】：

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

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

也许我的大脑工作不正常，但我今天想不出解决办法..

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

【问题讨论】：

可能不需要问题标题中的 [CSS]

标签： css html background center-align

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

您还可以使用margin:0 auto;将内容区域居中
*您可以在photoshop中轻松创建半白半图案的背景图片

【讨论】：

完美！它可能不是最干净的解决方案，但它使我不必完全重写我的页面结构。我的 3000px 宽 bg/pattern 仍在 2kb 以下，所以文件大小不是问题。
我在我的网站上使用了类似的东西来添加阴影。相信我这是很好用的解决方案游戏点，游戏预告片使用类似的技术为其内容添加阴影

【解决方案3】：

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

根据背景图片，您还可以执行以下操作：背景： url(...) #000 重复-y 对；

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

【讨论】：