Как я могу иметь область с плитками слева и справа от div?

Question

У меня есть div # main с фоновым изображением с эффектом виньетирования.

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

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

Как мне настроить div и css, чтобылевая область мозаики знает, что она начинается с крайней левой стороны экрана и останавливается с левой стороны изображения, а также так, чтобы правая область мозаики начиналась с правого края изображения и продолжалась до крайней правой стороныэкран

Answer 1

Что-то вроде этого будет работать, где bg_tile.jpg - это фон с мозаичным рисунком без виньетирования, а bg.jpg - изображение, опубликованное в вашем описании:

#main_wrapper {
  background: url(/images/bg_tile.jpg) repeat 50% 0;
}

#main {
    width: 960px;
    height: 300px;
    margin: 0 auto;
    background: url(/images/bg.jpg) no-repeat 50% 0 transparent;
}

Аналогичный эффект наблюдается на Cultureamp (за iPad). Проверьте CSS, чтобы увидеть его в действии.