Центрированный DIV с различными фонами с обеих сторон

Question

Итак, я создаю веб-сайт, в котором весь контент находится в одном центрированном разделе.

Я использую поля left-right и right для автоматического центрирования своего контента, с левой стороны от моего контента я хочу чистый белый фон, однако с правой стороны я хочу повторить фоновый узор.

Может быть, мой разум просто не работает должным образом, но я не могу придумать решение для этого сегодня..

-------------------------------------------
|  white    |   content       |  pattern  |         
|    bg     |   centered      |    bg     |
|           |                 |           |
|           |                 |           |
-------------------------------------------

Answer 1

Используйте изображение шириной 1680px с наполовину белым цветом и наполовину в качестве шаблона и используйте repeat-y повторять его по вертикали и центру... Это поможет вам в будущем сказать, что вы хотите изменить свой фон на единый шаблон, вам не нужно будет ничего менять, кроме файла bg img...

body{
    background:url(../images/bg.jpg) fixed;
    background-repeat:repeat-y;
    background-position:top center;
}

Вы также можете центрировать свою область контента, используя margin:0 auto;
* Вы можете легко создать фоновое изображение с наполовину белым и наполовину узором в photoshop

Answer 2

Вы можете использовать один из трех вариантов размещения колонок. Затем просто установите фоновое изображение в третьем столбце так, как вы хотите, повторить.

Answer 3

Вы можете использовать технику размещения с 3 столбцами и установить правый и левый столбцы на разные фоны. Один такой, описанный здесь.

В зависимости от фонового изображения вы также можете сделать что-то вроде: background: url(...) #000 repeat-y right;

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