Использование CSS3 нескольких фонов только с одним повторением

Question

Я пытаюсь использовать несколько фонов CSS3: верхнюю часть (не повторяется), среднюю часть (1-пиксельный срез, чтобы сделать контейнер «расширяемым») и нижнюю часть (не повторяется).У меня проблема в том, что средняя часть повторяется, покрывая как верхнюю, так и нижнюю части.Тот же результат в IE9, FF6 и Chrome.Вот мой код:

    #container {
   margin: 0 auto;
   width:1093px;
   background-image: url('WC-Background-Top.jpg'), url('WC-Background-1px.jpg'), url('WC-Background-Bottom.jpg');
   background-position: top, middle, bottom;
   background-repeat: no-repeat, repeat-y, no-repeat;
}

Answer 1

Вы можете создать три отдельных элемента div с заданными для каждого фонами.

#topContainer{background: url('WC-Background-Top.png') no-repeat; }
#midContainer{background: url('WC-Background-1px.png') repeat-y; }
#bottomContainer{background: url('WC-Background-Bottom.png') repeat-y; }

Я считаю, что это самый верный способ сделать то, что вы хотите.

Добавьте к тем другим стилям, которые вы упомянули. Если вы хотите, чтобы они выходили за пределы потока других элементов, рассмотрите возможность предоставления им position:absolute.

Answer 2

Разделите страницу, используя теги <div>, и примените соответствующее изображение к каждому свойству background-image <div>. Таким образом, вы можете указать разные значения свойств для background-repeat.