Проблемы с background

[galaydas]

Вот у меня такая проблема.

На этом сайте

Страница сайта, в области контента (два background), один no-repeat, другой repeat-y.

Можно ли сделать так, что бы второй начинал повторения после первой картинки? Уже все перепробовал, и блоки друг в друга вставлял, не знаю что и делать, важно, что бы при увеличении контента второй bg удлиннялся

Edited May 4, 2012 by galaydas

[Modestes]

Ко второй картинке добавьте margin-top: ;

или можете спозиционировать

кстати, затрите кусочек внизу справа у второго изображения)

Edited May 4, 2012 by Modestes

[galaydas]

Спасибо за совет, но если поставить margin-top, то смещается вниз и текст тоже. (см ссылку вверху)

Вот код:

#left_col {padding-right:45px; background:url(../img/bg_bg.png) top center no-repeat;}
#bg_bg {background-image: url(../img/bg_bg2.png) ;
    background-position: center; 
    background-repeat: repeat-y; margin-top:400px;}

Может быть я что то не так делаю, если нижнюю картинку не повторять по (Y) то все хорошо позиционируется через background-position, но как только вставляю Y, все.. поехало..

PS. Нижняя картинка вообще другая будет, я просто принцип понять хочу :-)

Edited May 4, 2012 by galaydas

[Modestes]

Спасибо за совет, но если поставить margin-top, то смещается вниз и текст тоже. (см ссылку вверху)

А как по вашему изображение сместиться ниже текста, если текст впаян в изображение?))

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

Или делайте отдельно изображения и пишите текст в HTML

Ой, показалось что текст впаян в изображение, минутку

У вас текст и изображение в одном блоке? Если да то разделите их, и двигайте изображение любым удобным для вас способом

к примеру

<p>Блаблабла</p>

<div class="bg_bg"></div>

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

<div class="bg">
<p class="text">
ТЕКСТ....
</p>
</div>

.text{
position:relative;
top:-200px;
}

Edited May 4, 2012 by Modestes

[galaydas]

Да, все верно :-)

HTML

<td id="left_col">
<div id="bg_bg">
<div id="bg_bg_in">
    <h3>Заголовок</h3>
   <p>Текст</p>  
</div>
</div>  
    </td>

CSS

#left_col { padding-right:45px; background:url(../img/bg_bg.png) top center no-repeat;  overflow:hidden; }
#bg_bg {background: url(../img/bg_bg2.png) repeat-y ; margin-top:500px; background-position:top center; }
#bg_bg_in {position:relative; top:-500px; margin-bottom:-500px;}

То что надо, Благодарю за помощь :-)

Вроде все и просто, но не сразу доходит. Спасибо!

Edited May 4, 2012 by galaydas