Как по горизонтали повторить два разных градиента BG на всю ширину страницы?

Question

У меня есть два разных градиента, которые нужно повторить на оси х. Один градиент отображается слева от макета моей страницы вплоть до крайнего левого окна браузера, а другой должен повторяться справа от макета моей страницы до крайнего правого окна браузера. У всей ширины страницы есть изображение, которое сливается с обоими и появляется над повторяющимися фонами.

В идеале я мог бы использовать два DIV и установить для них ширину 50%, а затем поместить часть шириной 960 поверх обоих в центре окна, но я не вижу никакого способа сделать это.

Как я могу сделать это с помощью CSS? Мне нужно поддерживать IE7 +.

Answer 1

Это должно работать.Я бы только сделал зеленый повторяемое изображение и использовал бы цвет фона, чтобы сделать красный (обозначен «красным» ниже).

HTML предполагает гибкую высоту #center, но его можно сделать фиксированной высотой.