Фон из двух кусков

Здравствуйте!
Нужно реализовать то, что нарисовано на картинке:
[attachment=3244:attachment]
Идёт сначала фон, а потом в конце картинка. и поверх всего этого можно будет размещать любую инфу (картинки, текст или ещё что-нибудь).

Подскажите как это лучше всего реализовать?

в чем проблема-то? картинка выровнена по правому краю.
{...
background: #цветфона url(picture.gif) no-repeat right center;
...
}
или я чего-то не понял?

null, слева от картинки не цвет а узор. Приглядись.

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

DareDevil а о них по подробнее можно?
Желательно пример кода.

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

Live, а что вы предложите?

Цитата:

---

Originally posted by null@May 6 2006, 19:40
{...
* * background: #цветфона url(picture.gif) no-repeat right center;
...
}

<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

---

[/quote]

Live там узор, а не цвет! приглядитесь.

bmn, если вы не знаете ЦСС, так и скажите, это не порок : )
Вам дали композитное стилевое св-во для контейнера, в котором описан цвет фона, а так же фоновое изображение позиционированное в правом верхнем углу... подробнее:
{
background-color:#ваш_цвет;
background-image:url(ваш_узор.gif);
background-position:100% 0%;
background-repeat:no-repeat;
}
если что еще - спрашивайте, с удовольствием поможем [Only registered and activated users can see links. Click Here To Register...]

Live вы меня слушать не хотите никак, да?
я вам говорю, что никакого цвета фона здесь нету.
фон состоит из двух картинок (одна -- фоновая, а вторая просто в правом углу висит).

а... там не цвет, а типа градиентик идет? тогда вложенность блоков.
сори.

Live, более того, градиентик в полосочку.

Цитата:

---

DareDevil а о них по подробнее можно?

---

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

А хотя можно сделать одну длинную картинку, хорошенько её пожать и задать просто фоном. [Only registered and activated users can see links. Click Here To Register...]

эх... совсем плохой стал. пора в отпуск : )

Live :biggrin2:
Live, DareDevil, Спасибо. Начинает проясняться.

Но есть один трабл.
Текст внутри блоков не хочет vertical-align&#39;ится вниз

Код:

---

<style>
.header {
 *background: #3A7CB1 url(imgs/header_bg.gif) repeat-x;
 *vertical-align: bottom;
 *height: 62px;
 *width: 100%;
}
.h {
 *background: url(imgs/header.gif) top right no-repeat;
 *vertical-align: bottom;
 *text-align: center;
 *height: 62px;
}
</style>

<div class=&#39;header&#39;>
 *<div class=&#39;h&#39;>
 * *Punkt1 Punkt2
 *</div>
</div> *

---

поэтому я использовал таблицу (стили те же)

Код:

---

<div class=&#39;header&#39;>
 *<div class=&#39;h&#39;>
 * *<table style=&#39;position: absolute; width: 100%; height: 100%&#39;>
 * * *<tr>
 * * * *<td style=&#39;vertical-align: bottom&#39;>
 * * * * *Punkt1 Punkt 2
 * * * *</td>
 * * *</tr>
 * *</table>
 *</div>
</div>

---

Проблема решена. Но может как-то можно без извращений с таблицой этой? IE точно не принимает это выравнивание, в других браузерах не смотрел.

Vertical-align не управляет положением содержимого внутри блочного элемента. Только внутри ячейки таблицы.

Опять же самое тупое, но самое быстроприходящее в голову — задать верхний паддинг.