Slaver's Blog

Вот тут советуют как делать резиновые блоки (по вертикали) с подложкой. Конечно, видел я разные варианты, но с нижним фоном в виде <img /> — не встречал. Кроме того, оно не работает в IE7.

Мне сразу же захотелось упростить и улучшить исполнение. Задача тривиальная, исходные данные оставим, как есть — три картинки для фона, один растяжимый по вертикали блок и пару параграфов текста. За минуту был сделан вариант с тремя вложенными дивами с background. Не очень семантично, зато минимально и везде работает.

* {
	margin: 0;
	padding: 0;
}

.block {
	width: 210px;
	background: url("middle.jpg") 0 0 repeat-y;
}

.block p {
	font-size: 75%;
	font-family: Georgia;
	padding: 0 20px;
}

.block .top {
	width: 210px;
	background: url("top.jpg") top left no-repeat;
	padding-top: 30px;
}

.block .bottom {
	width: 210px;
	background: url("bottom.jpg") bottom left no-repeat;
	padding-bottom: 30px;
}

<div class="block">
	<div class="top">
		<div class="bottom">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Aenean dictum, neque id ornare porttitor, nisl odio sollicitudin arcu,
			eu scelerisque nibh lorem in ipsum. Suspendisse dolor lacus, vulputate eu…</p>
		</div>
	</div>
</div>

Предлагаю поупражнятся в оптимизации и изящности :)