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;
}