CSS: как залить боковушки картинкой?

Question

[Lici]

Рисую менюшку. Хочу, чтобы слева и справа прямоугольного div-блока менюшки она заканчивалась картинкой. Интересует 2 варианта:

1) Картинка заливает собой край внутри div блока

2) Картинка «приклеиватеся» слева и справа к div блоку


Подскажите как это реализовать. Заранее спасибо.

Comments

[Lici]

Хочу все меню сделать примерно таким:



А пока что оно выглядит как будто левую и правую часть обрезали. Пока что только вырезал серидину и залил им все с повтором по горизонтали.

[Lici]

Уточнение: таким:



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



И нужно как то придумать чтоб залить боковушки тоже такими штуками.
В качестве костыля, можно, конечно, засунуть еще поверх 2 блока div, у одного с отступом слева, у другого справа и залить их только боковой картинкой, но это извращение) должно же существовать какое то элегантное решение)

[anathem]

Вполне нормальный вариант))) Ну можно before/after сделать, но не факт, что элегантней. Можно несколько бэкграундов сделать в одном блоке, но его не будет тот же ИЕ поддерживать.

Answer 1

[Softlink]

А почему не рассматриваете вариант с бордером? Ведь очень похоже на dashed. Или я где-то подвоха не вижу?

Comments

[Softlink]

Немножко с градиентом промахнулся :)

[Lici]

Отлично! Тоже думал может такое существует, но искал по запросу «border муравьи» и не нашел ;)

А как вообще бороться с тем, что если я делаю у внешнего div-а padding большой то внутренний блок выдавливается вправо и внешний блок растягивается вправо. А я хочу, что бы все осталось на месте, но внутренний блок уменьшился, «сжался».

Есть какие то свойства, отвечающие за это?

Пока костялем для компенсирования выдавливания задал внешнему блоку ширину 99% и оно за счет этого если и растягивается то засчет появившегося люфа.

[Softlink]

Lici, вы бы уже выложили куда-нибудь пример, иначе мы так долго будем перебирать абстрактные варианты.

Answer 2

[xripunov]

Также можно с помощью :before и :after изловчиться

Answer 3

[anathem]

Если бы накидали хотя бы схематично, — было бы лучше.
1. Край внутри блока:
Менюшка

.menu {
  background-image: url('yourimage.png');
  background-repeat: repeat-y;
  background-position: 0px 0px;
}

Будет заливка по левому краю (по оси-y)… Что бы сделать по правому, — играемся с background-position.
2. Проще всего будет поместить див в другой див, задаем им обои ширину (width), внешнему отступы (padding), и внешнему делаем тоже самое :)

Comments

[anathem]

Сам блок

<div class='menu'>Менюшка</div>

[Lici]

Добавил вверху поста пояснение.

[anathem]

Padding-ом, не? jsfiddle.net/5Xsa6/2/ )

[Lici]

Менюшка динамически меняет свой размер в зависимости от того, что в нее вписали. Потому залить все одной большой картинкой не вариант.

[anathem]

По высоте или ширине? ) Если по ширине, то самый первый мой вариант, только относительно элемента. Или же, как ниже сказали, — before/after.

[Lici]

Ширине