html - 固定宽度中心，动态左右背景图像列

Question

我已经找到了一些方法来做我正在尝试的事情，但我不确定到底什么是最好的或首选的方法......基本上我想要一个 1000px 的固定宽度#main div，然后在左侧和右侧我想要两个单独的图像，如果分辨率足够大，它们可以填充更多宽度，但如果分辨率不够大，则图像不计入文档宽度。希望这是有道理的。有什么建议吗？

Answer 1

您可以制作 1400 像素宽度的背景图片(例如 bg.jpg)。将左右图像放到这个 bg.jpg 上。

左图在 bg.jpg 的最左边，右图在 bg.jpg 的最右边。最后你将只有一张图片，即 bg.jpg。

如果您的主包装器是居中对齐的，那么您可以将 css 添加到正文中，这样背景图像也是居中对齐的。但主包装器不会覆盖左右图像。

body{
background-image: url("bg.jpg") center 0 no-repeat;
}