Заливка фона сайта «от центра», как?

Question

[Lici]

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

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

Варианты:
1) Каким то образом объяснить браузеру, что сначала надо весь сайт залить определенным фоном, а потом его центральную часть — другим. Как это сделать?
2) Сделать картинку маленькой высоты и очень большой ширины и залить сайт ей, дублируя ее вертикально, но так, что бы картинка не упаралась в левый конец окна левой частью, а заливалась от центра. Как это сделать?

Заранее спасибо.

Answer 1

[Bamboo]

http://cssdesk.com/EnT4m

Answer 2

[Jonh Doe]

cssdesk.com/ykqwc

Answer 3

[MiXei4]

CSS:
body {background:url(картинка) 50% 0% repeat-y;}
Картинка будет дублироваться вертикально от центра

Answer 4

[Павел Рыбин]

1. Для элемента html использовать одну фоновую картинку (внешнюю), а для body другую, с фиксированной шириной.
2. Для выравнивания картинки по центру указать background-position: 50% 0 repeat-y;

Comments

[Lici]

html { background: #F6F6F6 url('/wp-content/themes/aiaua/images/yellow-bg.jpg'); } body { background: #F6F6F6 url('/wp-content/themes/aiaua/images/beige-bg.jpg') ; text-rendering: optimizeLegibility; /**/ width: 1200px; margin: 0 auto; }

нормальный код?)

[Павел Рыбин]

Да