Растягивание фона блока

[flintovich]

Есть блок с бекграундом. При добавлении в него большого количества контента, контент начинает снизу вылазить за изображение. Как сделать так чтобы по мере добавления контента изображения растягивалось(заменяя рястяжение белой заливкой, но чтобы при этом сохранились ее границы и закругленный низ)???

Картинку фона блока прилагаю.

[Vin]

Можно border-redius'ом скруглить углы блока, можно нижнюю часть изображения вырезать и вставить фоном в пустой div.

Вариант с изображениями выглядит примерно так:

В sidebar-header и sidebar-bottom фон не повторяется, в sidebar-main повторяется по вертикали.

Edited April 13, 2012 by Vin

[flintovich]

Можно border-redius'ом скруглить углы блока, можно нижнюю часть изображения вырезать и вставить фоном в пустой div.

Вариант с изображениями выглядит примерно так:

В sidebar-header и sidebar-bottom фон не повторяется, в sidebar-main повторяется по вертикали.

Спасибо, именно то что нужно.

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

[Vin]

А что хоть в этом блоке находиться будет? И большие ли отступы сверху и снизу?

[flintovich]

А что хоть в этом блоке находиться будет? И большие ли отступы сверху и снизу?

Там будет только текст.

С отступами padding:0 29px 0 23px;

[Vin]

Т.е. текст будет заходить на верхнюю часть с градиентом и будет обтекать циферблат?

Вообще, это хорошо описано в книжках, но есть и в интернете http://chikuyonok.ru/2009/10/decor/

[flintovich]

Спасибо, обязательно прочту.

Нет, все проще, текст под часами. Вот картинку сделал как хочется. Только конечно, чтобы сохранялись края.

Edited April 13, 2012 by flintovich

[Vin]

Опять же, вариант примерный, но думаю, подойдёт.

HTML:

<div class="sidebar">
	<div class="sidebar-header"></div>
	<div class="sidebar-main">
		<div class="sidebar-text">
			<h2>Lorem Ipsum</h2>
			<p>Lorem Ipsum dolor sit amet</p>
		</div>
	</div>
	<div class="sidebar-bottom"></div>
</div>

CSS:

.sidebar-header {
	background: url(img/sidebar-heaeder-bg) no-repeat;
	}

.sidebar-main {
	background: url(img/sidebar-main-bg) repeat-y;
	}

.sidebar-text {
	margin-top: -10px; /* Отрицательный отступ для того, чтобы текст залез на блок с градиентом (sidebar-header) */
	}

.sidebar-bottom {
	background: url(img/sidebar-bottom-bg) no-repeat;
	}

Edited April 13, 2012 by Vin

[flintovich]

Большое спасибо, сейчас разбираю.