Вылезающий текст с одного фона на другой

Antwerpen · June 27, 2011

Допустим, у меня есть div, в котором написан текст, у него в background картинка 1px, и она repeat-y.

А ниже есть другой div, например, в 100px высотой, у него background - фиксированная картинка.

Можно ли сделать так, чтобы при написании текстов в верхнем div, его фон динамически увеличивался, и часть текста высотой в 100px вылезала на фон нижнего div?

Либо, можно ли установить у div'а два разных background'а? Фиксированный, прижатый к нижнему краю, а второй - динамический?

Edited June 27, 2011 by Antwerpen

Softlink · June 27, 2011

Допустим, у меня есть div, в котором написан текст, у него в background картинка 1px, и она repeat-y.
А ниже есть другой div, например, в 100px высотой, у него background - фиксированная картинка.
Можно ли сделать так, чтобы при написании текстов в верхнем div, его фон динамически увеличивался, и часть текста высотой в 100px вылезала на фон нижнего div?

верхний фон динамически увеличится, если про repeat браузеру ничего не говорить совсем. А по второму вопросу можно как-нибудь нарисовать, то что вы хотите сделать? Не совсем понятно.

Antwerpen · June 27, 2011

Набросал на примере в прикрепленном файле.

Видно, что текст единый, в верхней части одна фоновая картинка распространяется по оси Y, а в нижней другая фоновая картинка фиксированная (границу обозначил).

Edited June 27, 2011 by Antwerpen

buddah · June 27, 2011

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

Softlink · June 28, 2011

1)можно сделать 2 бэкграунда в одном диве. Но это не будет работать почти во всех ИЕ.

2)Я так понял, что если у вас идет измерение в пикселях, то высоту блока вы делаете фиксированной. Вот такое решение подойдет?

http://jsfiddle.net/6CTKH/

Antwerpen · June 28, 2011

1)можно сделать 2 бэкграунда в одном диве. Но это не будет работать почти во всех ИЕ.
2)Я так понял, что если у вас идет измерение в пикселях, то высоту блока вы делаете фиксированной. Вот такое решение подойдет?
http://jsfiddle.net/6CTKH/

Хорошее решение, но не совсем то, что нужно. Да, нижний div у меня фиксированный, но верхний - динамический по вертикали.

Edited June 28, 2011 by Antwerpen

Softlink · June 28, 2011

1)можно сделать 2 бэкграунда в одном диве. Но это не будет работать почти во всех ИЕ.
2)Я так понял, что если у вас идет измерение в пикселях, то высоту блока вы делаете фиксированной. Вот такое решение подойдет?
http://jsfiddle.net/6CTKH/
Хорошее решение, но не совсем то, что нужно. Да, нижний div у меня фиксированный, но верхний - динамический по вертикали.

Т.е неизвестно сколько будет в нем контента?

SelenIT · June 28, 2011

можно ли установить у div'а два разных background'а? Фиксированный, прижатый к нижнему краю, а второй - динамический?

Да, можно:

в новых браузерах — просто через запятую в св-ве background;
в старых IE — динамический как обычно, а фиксированный через фильтр AlphaImageLoader с параметром sizing=crop.

Правда, в IE с этим способом бывают подводные камни с кликабельностью ссылок и кнопок, попадающих на вторую картинку (лечится заданием для них position:relative). Так что пока самое надежное и практичное решение — вложить дивы друг в друга и задать внешнему повторяющийся фон, а внутреннему — нижний неповторяющийся.

pushkinma · June 28, 2011

Допустим, у меня есть div, в котором написан текст, у него в background картинка 1px, и она repeat-y.
А ниже есть другой div, например, в 100px высотой, у него background - фиксированная картинка.
Можно ли сделать так, чтобы при написании текстов в верхнем div, его фон динамически увеличивался, и часть текста высотой в 100px вылезала на фон нижнего div?
Либо, можно ли установить у div'а два разных background'а? Фиксированный, прижатый к нижнему краю, а второй - динамический?

делай как я:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Div</title>
			<style>
				#under{background:url(bg-under.png) repeat-y;}
				#main{width:176px;background:url(bg.jpg) no-repeat bottom;word-wrap:break-word;}
			</style>
	</head>
	<body>
		<div id="under">
			<div id="main">
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
				asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
			</div>
		</div>
	</body>
</html>

пояснение: главное свойство background-position: bottom. Но т.к. оно только для всего фона, делаем один элемент со статическим фоном(id="main") внутри другого с динамическим(id="under"). Так же не забываем про word-wrap:break-word; для случая если текст написан без пробелов, чтобы не вылезал за указанный width(работает даже в IE6).

Antwerpen · June 28, 2011

Т.е неизвестно сколько будет в нем контента?

Да, текст будет добавляться через CMS, на каждой странице он будет разной величины.

SelenIT, pushkinma

Спасибо за ответы! Сейчас буду пробовать.

Edited June 28, 2011 by Antwerpen

Antwerpen · June 28, 2011

pushkinma

Твой способ сработал! Огромное спасибо! С помощью него прикрутил еще один div внутрь, у которого background position:top. Теперь у меня и снизу, и сверху по статичной картинке, а между ними динамический фон.

Sign In

Вылезающий текст с одного фона на другой

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information