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

Question

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

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

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

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

Answer 1

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

Answer 2

Используйте изображение шириной 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 3

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

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

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