如何将内容保留在容器中，但将背景图像扩展为全宽度？

Question

我在尝试开发并排放置两列的布局时遇到问题。左列将占视口宽度的66.66％，右列将占视口宽度的33.33％。这些列中的内容必须保留在容器div中，例如768px。我创建了这个布局的含义的快速模型：

因此，在上面的示例中，红色和蓝色部分分别是一个带有背景图像的div。较浅的红色和蓝色部分将是容器元素内每个列的内容。

我似乎无法弄清楚的问题是如何将内容保留在768px容器中，还要如何将每列的背景图像扩展到全角。