css - 无论浏览器窗口大小如何，在视觉上连接到内容背景的边距背景

Question

我需要创建一个启动页面，其中包含一个波形，该波形在一些营销文本下方运行页面的宽度。页面设置由一个 960 像素宽的主要内容区域组成，两侧是两个具有自动边距宽度的边距区域。我需要能够将用作内容区域背景的波形图像与用作边距背景的波形图像对齐。本质上，无论用户的浏览器窗口大小如何，波形线都需要在边缘和主要内容区域之间进行视觉连接。下面是我必须使用的模板的一个简单示例（这并不是说我不能在必要时添加到结构中）。如果有人对如何实现这一点有一个好主意，我将不胜感激您的意见。

.main {
    // not sure what to do here, but I know this isn't it
    // background: url("margin-wave.jpg") no-repeat scroll left top transparent;
}

.content {
    margin: 0 auto;
    width: 960px;
    background: url("main-wave.jpg") no-repeat scroll left top transparent;
}

<div class="main">
  <div class="content">
  ...
  </div>
</div>

Answer 1

我的猜测是：

.main {
    background: url("margin-wave.jpg") repeat-x scroll center top transparent;
}