фон на боках сайта

[alfaq]

Приветствую всех!

Столкнулся с такой проблемой, на сайте имеется div главный, который размещён по центру и в нём находится весь контент, меню и т.д. Этот div имеет ширину 1024px. Теперь о проблеме: необходимо добавить слева и справа фон который будет прилипать к краям браузера, независимо от разрешения монитора пользователя, при этом центральный div остаётся 1024px

делаю так

<div id="l_lg">
<div id="r_lg">
<div id="main">
контент
</div>
</div>
</div>

и css такой на левый фон

#l_lg {
	background: url('../images/l_lg.png') repeat-y;
	left:0px;
}

левый фон есть и контент остаётся на своём месте, но теперь как сделать справа фон? ширина фона 100px

вертел, крутил, что-то без результов пока.

[Ergonav]

#r_lg {

background: url('../images/l_lg.png') repeat-y;

right:0px;

}

Перед этим закрыть див, должно сработать по идее

Edited June 12, 2012 by Ergonav

[mrnobody]

http://htmlbook.ru/faq/kak-dobavit-dva-fona-k-odnomu-elementu-cherez-css3

[alfaq]

Ergonav, так патылся сделать но правый фон распологается сразу над левым, видимо из-за отсутствия width, добавлял его, но результат не получил.

mrnobody, спаисбо хорошая статейка, а главное оказалось так просто! сделал так

#l_lg {

background: url('../images/l_lg.png') repeat-y;

left: 0px;

}

#r_lg {

right: 0px;

background: url('../images/r_lg.png') repeat-y 100% 0;

}

но в IE затишье, как заставить это там работать?

[alexforce2]

Что у вас делают атрибуты left: 0px; и right: 0px; - они здесь лишние.

ИЕ6 не поддерживает png, как ему помочь читайте http://www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/ie6/png-transparency-ie6.html

[dostel1]

какие минусы у способа ,если левый и правый блоки повесить через абсолют и задать им фон?

[alfaq]

какие минусы у способа ,если левый и правый блоки повесить через абсолют и задать им фон?

из блоков

<div id="l_lg">
<div id="r_lg">
<div id="main">
контент
</div>
</div>
</div>

видно что если сделать их абсолютно позиционированными то main будет наследовать от r_lg и следовательно съезжать вправа! Пытался clear: both; но не помогало.

если же блоки расположить так

<div id="l_lg">
</div>
<div id="r_lg">
</div>
<div id="main">
контент
</div>[code]

то проблема с height, они не растягиваются на всю длину контента, height 100% только на длину видимой области тянет

Edited June 13, 2012 by alfaq

[dostel1]

видно что если сделать их абсолютно позиционированными то main будет наследовать от r_lg и следовательно съезжать вправа! Пытался clear: both; но не помогало.

если же блоки расположить так

<div id="l_lg">
</div>
<div id="r_lg">
</div>
<div id="main">
контент
</div>[code]

то проблема с height, они не растягиваются на всю длину контента, height 100% только на длину видимой области тянет

а у тебя сайт со скроллом?Если нет ,то абсолютам можно задать min-height:100%

[alfaq]

dostel1, да скрол есть, причём фон на весь body должен быть, а стр бывает различной высоты, соответственно от кол-ва контента. Пытался ява скриптом задавать height, но в нём я пока слабоват. Пока сделал работает какmrnobody, посоветовал, но хотелось что бы в ИЕ заработало.

[dostel1]

document.getElementById('l_lg').style.height=document.getElementById('main').offsetHeight

document.getElementById('r_lg').style.height=document.getElementById('main').offsetHeight

[miloslovesky]

http://jsfiddle.net/HDepc/

[rewue]

делалась шкурка для игрового сервера. какой то из бекапов работы )), уж не помню какой. возможно подойдет http://rewue.rv.ua/merlin/index.html

делалось через обертки,сейчас можно гораздо проще слепить через background для body

Edited June 21, 2012 by rewue