Блог

Я пытаюсь использовать несколько фонов 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;
}
  

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

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

 #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 предоставления .