Резиновый блок из 2 картинок!

[BSandro]

Возник такой вот вопрос!

Думал сам не додумался, искал в google,yandex (P.S тоже не чего, может плохо искал...)

Сообственно вот картинка

Я убрал:

1.Текст.

2.полоски

3.верхнею бгешку где написано меню сайта.

4.конечно же эффект при наведений

получилось вот так:

Теперь я порезал эту картинку на 2 части:

и

В итоге я хочу сделать так что бы при добавления пунктов меню данный блок расширялся;

Я понимаю что там верхний блок надо еще чуток по высоте пределать ему!

Но как реализовать все это увы не могу понять!

Как просто фикс могу сверстать а так не могу додуматся!

Заранее спасибо.

[Switch74]

Попробуйте верхний голубой фон отрезать так же как нижний, а серединку оставить в 1px высотой:

верх и них у вас будут стоять как есть, фон под любым количеством пунктов меню будет множиться и тем самым получиться резиновое меню по вертикали

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

Edited October 15, 2013 by Switch74

[SelenIT]

Проще всего серединку банально сделать с приличным запасом, пикселей в 250. Если сохранять в PNG, разница в размере файла должна быть невелика. Но имхо в наши дни разумнее сделать этот фон CSS-градиентом (с откатом до сплошной заливки центральным цветом), а законцовки и др. украшения положить поверх с прозрачностью.

[cupWebCode]

центральную часть блока можете репитить по Y, или же сделать градиентом, а картинку которая находится в низу - сделать её с помощью :after... и все проблемы решины)

[BSandro]

Вы меня не понял :-)

Как это все в css записать ?

на счет вырезать я не парюсь, я не могу 2 картинки прописать к 1 div не знаю как!

И вообще где не лазил, не нашел!

Поэтому зарегистрировался на форуме что бы задать данный вопрос.

для 1 картинки да могу прописать

допустим

.bg-menu {background:url(image.png) no-repeat; width:150px; height: 340px;}

Вот примерно так а как 2 картинку прописать не знаю

[Switch74]

если кроссбраузерностью не париться, то что-то вроде

background:
	 url(image1.png) no-repeat,
	 url(images2.png) no-repeat,
	 url(images3.png) repeat-y;

[BSandro]

если кроссбраузерностью не париться, то что-то вроде

background:
	 url(image1.png) no-repeat,
	 url(images2.png) no-repeat,
	 url(images3.png) repeat-y;

Спасибо щас попробую!

Эм а как для каждого файла прописать высоту и ширену?

Сама ширина и высота не задастся же )

Edited October 15, 2013 by BSandro

[Switch74]

1. логично иметь фоновые картинки подогнанные под блок

2. вы зашли на форум хорошего справочника (я бы сказал очень хорошего) в котором все есть

http://htmlbook.ru/css/background

[BSandro]

Не выходит, а в браузере даже не показывает!

.bg-menu {background:url(image/bg-menuverx.png) no-repea, url(image/bg-menuniz.png) no-repeat, url(image/bg-menucenter.png) repeat-y;}

[Switch74]

браузер и версия какие?

[cupWebCode]

Попробуйте вот так:

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Edited October 15, 2013 by cupWebCode

[Switch74]

можно конечно через after и before только для них нужно тоже указать соответственный background

[BSandro]

Попробуйте вот так:

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Картинки то 3 ))

[cupWebCode]

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

background: url(../images//*Здесь ваша нижняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

.bg-menu:before {

content: "";

background: url(../images//*Здесь ваша верхняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

[BSandro]

.bg-menu {

background: url(../images//*Здесь ваша центральная карнинка*/) no-repeat;

position: relative;

}

.bg-menu:after {

content: "";

background: url(../images//*Здесь ваша нижняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

.bg-menu:before {

content: "";

background: url(../images//*Здесь ваша верхняя карнинка*/) no-repeat;

display: block;

width: /*указываем ширину нижней картинки*/px;

height: /*указываем высоту нижней картинки*/px;

position: absolute;

left: 1px; /*указываете столько сколько вам необходимо*/

right: 1px; /*указываете столько сколько вам необходимо*/

top:1px; /*указываете столько сколько вам необходимо*/

bottom: 1px; /*указываете столько сколько вам необходимо*/

}

Верхняя и нижняя картинка встала, центральная картинка вверху, текст не накладывается!

То есть лежит под картинками )))

Даже закинул сюда http://jsfiddle.net/tns5b/

Edited October 15, 2013 by BSandro

[Catherine]

http://jsfiddle.net/Cath_kb/tns5b/1/

[BSandro]

http://jsfiddle.net/Cath_kb/tns5b/1/

спасибо огромное что бы я без вас делал, сейчас главное запомнить этой свойство применение!

[BSandro]

Попробовал по играться сам и короче не получается что то!

Вроде все правильно сделал

http://jsfiddle.net/QuJDE/

[Catherine]

у вас ошибка в следующей строке:

background: url url(http://savepic.su/3529436.png) 0 100% no-repeat; /*низ*/

[BSandro]

у вас ошибка в следующей строке:

background: url url(http://savepic.su/3529436.png) 0 100% no-repeat; /*низ*/

Спасибо, невнимательность у меня немножко ( скорей всего из за того, то что я уделяю верстке по 14 часов в день.)

у вас ошибка в следующей строке:

background: url url(http://savepic.su/3529436.png) 0 100% no-repeat; /*низ*/

а сделать не как нельзя, что бы этих полосок по середине видно не было

[Catherine]

Можно, надо правильно разрезать и сохранить картинки. Или, например, вообще убрать основной фон из верхней и нижней картинок, оставив только неповторяющиеся элементы http://jsfiddle.net/Cath_kb/QuJDE/2/.

[BSandro]

Можно, надо правильно разрезать и сохранить картинки. Или, например, вообще убрать основной фон из верхней и нижней картинок, оставив только неповторяющиеся элементы http://jsfiddle.net/Cath_kb/QuJDE/2/.

Спасибо но я сам уже пере резал картинки ))

Еще раз благодарю тех кто помог решить проблему!

Тему можно закрыть!