无论浏览器窗口大小如何,视觉上连接到内容背景的保证金背景

时间:2012-04-10 22:48:02

标签: css margins

我需要创建一个启动页面,其中包含在某些营销文本下方运行页面宽度的波形。页面设置包括一个960px宽的主内容区域,两个边缘区域具有自动边距宽度。我需要能够将用作内容区域背景的波形图像与作为边距背景的波形图像对齐。实质上,无论用户的浏览器窗口大小如何,波形线都需要在边距和主要内容区域之间进行可视连接。下面是我必须使用的模板的一个简单示例(这并不是说如果需要我不能添加到结构中)。如果有人对如何做到这一点有很好的了解,我将非常感谢您的意见。

.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>

1 个答案:

答案 0 :(得分:0)

我猜是这样的:

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