Фоны полей, которые визуально связаны с фоном контента, независимо от размера окна браузера.

У меня есть требование создать заставку, содержащую форму волны, которая проходит по ширине страницы под некоторым маркетинговым текстом. Настройка страницы состоит из области основного содержимого шириной 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>

css margins
person MattC    schedule 10.04.2012    source источник
comment
Сколько именно других изображений задействовано здесь?   -  person Neil    schedule 11.04.2012
comment
Всего два: один для области содержимого (содержит более крупные волны, которые становятся меньшими волнами по бокам изображения) и один для полей (меньшие волны мне нужны, чтобы соответствовать сторонам области содержимого). Мысль состоит в том, что меньшее изображение будет содержать одну или две волны и будет повторяться.   -  person MattC    schedule 11.04.2012

Ответы (1)


arrow_upward
0
arrow_downward

Мое предположение было бы таким:

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