Хитрый фон из нескольких картинок на DIV

[Wormaster]

Здравствуйте уважаемые. У меня такая проблема... есть очень хитрый фон состоящий аж из 6 картинок(для резиновости) если использовать по старинке таблички то никаких проблем нет, но фон слишком большой поэтому нужны дивы... а вот с дивами разобраться не могу.

Вот как это выглядит в табличках.

HTML

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td class="l_up"> </td>
	<td class="c_up"> </td>
	<td class="r_up"> </td>
  </tr>
   <tr>
	<td class="cc"> </td>
	<td class="cc"> </td>
	<td class="cc"> </td>
  </tr>
  <tr>
	<td class="l_dwn"> </td>
	<td class="c_dwn"> </td>
	<td class="r_dwn"> </td>
  </tr>
</table>

CSS

.l_up
{
	background: url(../images/l_up.png) no-repeat;
	height: 104px;
	width: 94px;
}

.c_up
{
	background: url(../images/c_up.png) repeat-x;
	height: 104px;
}

.r_up
{
	background: url(../images/r_up.png) no-repeat;
	height: 104px;
	width: 174px;
}
.cc {
	background:url(../images/c_up.png);
	}
.l_dwn
{
	background: url(../images/l_dwn.png) no-repeat;
	height: 522px;
	width: 94px;
}

.c_dwn
{
	background: url(../images/c_dwn.png) repeat-x;
	height: 522px;
}

.r_dwn
{
	background: url(../images/r_dwn.png) repeat-x;
	height: 522px;
	width: 174px;
}

.f_left
{
	background: url(../images/footer_l.png) no-repeat;
	height: 68px;
	width: 324px;
}

.f_center
{
	background: url(../images/footer_c.png) repeat-x;
	height: 68px;
}

.f_right
{
	background: url(../images/footer_r.png) no-repeat;
	height: 68px;
	width: 180px;
}

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

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

А требуется чтобы он растягивал фон под себя... убил почти целый день, если у кого нибудь есть идею буду очень благодарен...

Edited February 9, 2010 by Wormaster

[Justnewone]

При наложении друг на друга они дают естественно другой цвет..

Естесственно надо сделать так, чтобы накладывались ТОЛЬКО ТАК, как накладываются соответствующе слои в psd. Если там все склеяно в один слой - значить дизайнер дурак. Тогда можно нарезать непрозрачных кусков.

[Wormaster]

Естесственно надо сделать так, чтобы накладывались ТОЛЬКО ТАК, как накладываются соответствующе слои в psd. Если там все склеяно в один слой - значить дизайнер дурак. Тогда можно нарезать непрозрачных кусков.

Не, оно не склеено просто я изначально не до конца понял суть мысли.

[VJiK]

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

хм... появились кое-какие мысли.... на досуге попробую =)

[Wormaster]

хм... появились кое-какие мысли.... на досуге попробую =)

Вобщем шаманил шаманил... попутно немного переделал дизайн но решение всё же придумал ))

XHTML

<div class="maincarrier">
      <div class="c1"></div>
      <div class="c2"></div>
       <div class="c3"></div>
       <div class="c6"><div class="content">
         <jdoc:include type="component" />
      </div>
    </div>      
    <div class="c7"><div class="dec2"></div></div>   
    <div class="c8"><div class="dec1"></div></div>
    <div class="c9"></div>
    </div>

CSS

.maincarrier
{
	margin-right: 15px;
	margin-left: 15px;
}

.content
{
	margin-right: 15px;
	margin-left: 15px;
}



.c1
{
	float: left;
	height: 11px;
	width: 11px;
	background: url(../images/c1.png) no-repeat;
}

.c2
{
	float: right;
	height: 11px;
	width: 11px;
	background: url(../images/c2.png) no-repeat;
}

.c3
{
	height: 11px;
	margin-right: 11px;
	margin-left: 11px;
	background: url(../images/c3.png) repeat-x;
}

.c6
{
	height: 100%;
	min-height:500px;
	background: url(../images/c3.png);
}
.c7
{
	float: left;
	height: 79px;
	width: 11px;
	clear: right;
	background: url(../images/c7.png) no-repeat;

}

.c8
{
	float: right;
	height: 79px;
	width: 11px;
	background: url(../images/c8.png) no-repeat;

}

.c9
{
	margin-right: 11px;
	margin-left: 11px;
	height: 79px;
	background: url(../images/c9.png) repeat-x;

}
.dec1
{
	background: url(../images/dec1.png) no-repeat;
	height: 523px;
	width: 158px;
	margin-top: -444px;
	margin-left: -147px;
}

.dec2
{
	background: url(../images/dec2.png) no-repeat;
	height: 90px;
	width: 82px;
	margin-top: -30px;
}

Вт такая вот хитрая приблуда...

[Wormaster]

Глянуть как работает можно тут http://terredebeaute.w-artstudio.ru

[shvv]

Глянуть как работает можно тут http://terredebeaute.w-artstudio.ru

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