Помогите с CSS !

[cashfile]

Всё , я уже иссяк мыслями и знаниями , 2 дня уже бьюсь.
Нужно сделать чтобы на фоне описания товара была градиентная заливка. Условие такое что описания по высоте занимают разную величину.
Нужно сделать так чтобы основная фоновая картинка с градиентом (фиксиров. определенной высоты) начиналась с верха описания к товару . Если описание по высоте больше размеров основной картинки фона ,то она наращивалась бы через repeat-y малым элементом ровно на величину текста .
В php файле:
<div class="tabs">
<a class="tab" tab="#tab_description"><span><?php echo $tab_description;?></span></a>
</div>
<div id="tab_description" class="tab_page"><?php echo $description; ?>
<div class="down"></div>
</div>
CSS:
--- основная картинка фона прижата вверх блока---
.tab_page {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin: padding;
background: #FFFFFF url('../image/product_fon1.png') no-repeat scroll 0 top;
float: bottom;
margin-top: 90px;
padding-bottom: 25px;
min-height: 320px;
width: 670px;
z-index: 2;
}
--- картинка дополнения фона к основной---
.tab_page .down {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin: padding;
background: transparent url('../image/product_fon_y1.png') repeat-y scroll;
margin-top: 272px;
padding-bottom: 25px;
z-index: 3;
}
Подскажите кто знает или хотя бы принцип скажите как !!!!

 

[Ewsen]

Растягивающийся градиент делается несколькими способами:
1) Можно сделать картинку с градиентом высотой, например 3000 пикселей.
2) Можно сделать 3 блока вложенных друг в друга, где один будет прижат к топу с картинкой верхней части градиента, второй(прижат к боттом) - с нижней, а третий (он должен быть на заднем фоне) с фоном соответствующим цвету нижней части верхней картинки и верхней части нижней картинки.
3) Можно сделать 2 блока вложенных друг в друга, где верхний верхний слой с градиентом будет прижат к топу, а нижний слой с фоном, соответствующим цвету нижней части градиента.

Первый способ самый простой и смотрится лучше других. ИМХО в вашем случае наиболее подходящий.

через repeat-y малым элементом

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

 

[cashfile]

Дело в том что в 1 варианте (условие красивого дизайна) при маленьком описании (область текста занимаемая по высоте) фон будет отображаться только его верхней частью - бледной . А если описание будет большим то большая часть текста описания будет отображаться либо нормально либо в большей части на темном фоне , т.к. чтобы исключить бледность для маленьких описаний придётся общую картинку градиента делать 80% цветом закраски .

Мне нравится идея №3. Картинки верха и низа я подобрал по оптимальным размерам для своих описаний товара. Сложность возникла в описании этой идеи в код CSS и код скрипта . Код для этой ситуации я прописал - но судя по прикрепленному изображению , что-то у меня не так.

Кому не сложно - подскажите !!!

 

[Conwell]

вот решение:
css:

.tab_page {
background: transparent url('../image/product_fon_y1.png') repeat-y bottom;
min-height: 320px;
width: 670px;
z-index: 2;
}
.down {
background: transparent url(../image/product_fon1.png) no-repeat scroll 0 top;
z-index: 3;
}

php:

<div class="tabs">
<a class="tab" tab="#tab_description"><span><?php echo $tab_description;?></span></a>
</div>
<div id="tab_description" class="tab_page">
<div class="down"><?php echo $description; ?></div>
</div>

возможно придется поправить отступы верхние.

 

[Ewsen]

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[cashfile]

Ребята , спасибо большое - всё получилось !!!

Для просмотра ссылки Войди или Зарегистрируйся

.... по моему даже min-height не нужен