Background-position + background-repeat: Как растянуть по ширине фон, вырезанный из картинки с множеством других элементов?

Question

[baksalyar]

Здравствуйте, уважаемые!
Возможно, вопрос покажется глупым, но я до сих пор не придумал как бы сделать так, чтобы растянуть бекграунд, вырезанный из картинки с множеством других элементов. То есть, у меня в одной картинке...



...есть набор:

1. Начало ленты с фигурными краями.
2. Конец ленты.
3. Середина ленты - просто фоновой отрезок шириной 1 px, который надо повторить энное количество раз, чтобы образовался динамически меняющийся по ширине промежуток между началом и концом ленты.

«Вырезаю» в CSS срединный элемент ленты так:

#ribbonCenter {
	position: absolute;
	background-image: url(/graphics/submenu_items.png);
	background-repeat: repeat-x;
	background-position: 28px -10px;
	width: 1px;
	height: 49px;
}

#ribbonCenterContainer {
	position: relative;
	height: 49px;
	width: 500px;
}

Но никак не могу повторить этот элемент. Т.е. он виден как узкая однопиксельная полоска, но не тиражируется на ширину элемента. Пробовал различные трюки с вложенными контейнерами, after, before и т.д. Но ничего толком не помогает.

Подскажите пожалуйста, что я делаю не так? И как это сделать правильно?

Comments

[Виталий Инчин ☢]

Картинку в студию.

[baksalyar]

ОК, обновил запись, добавив кусок картинки — ленточка с левым-правым краями и центральным однопиксельным фоновым заполнителем.

Answer 1

[Дмитрий Шамонов]

В селекторе #ribbonCenter свойство width равен 1px. Поэтому и видна только "узкая однопиксельная полоска" =)

В любом случае, при использовании данного спрайта результат будет примерно таким:

Comments

[baksalyar]

Ваш ответ не сильно помогает в решении задачи. :D

[Дмитрий Шамонов]

Может быть не внимательно читаете? ) Вы обозначили проблему "Т.е. он виден как узкая однопиксельная полоска, но не тиражируется на ширину элемента", я указал на её причину. Если я правильно понял из контекста, вы хотите свойством background-repeat: repeat-x; "размножить" абсолютно спозиционированный элемент внутри какого то родителя? Так это не работает :)

Answer 2

[Сергей Петроченко]

Делаете три блока один вложенный в другой

<div class="len-left">
    <div class="len-right">
      <div class="len-center">
       
      </div>
   </div>
  </div>

ну и каждому из них прописывете свой бэкграунд, центральному полоску чтобы тянулось, но полоску конечно в фотошопе лучше доделать а то как выше писали будет. Хотя можете попробовать смотреть в сторону background-size: 1px auto; только в ие ниже 9 не сработает.

Comments

[Сергей Петроченко]

Неочень верно я тут насоветовал))) Но в любом случае у вашей картинки у левой и правой кусков ленты разные крайние пиксели по цвету и у полоски, даже если бы и получилось что то из этого то были бы не подходящие цвета