Создание <div> с тенью только слева и справа

Моя цель - добавить тень влево и вправо от #container div, которая имеет ширину 960 пикселей.

Сам #container содержит заголовок, навигационное меню, основное содержимое, боковую панель и ногу. Но сам заголовок выходит из #container с пользовательской шириной из-за графика.

Как таковой, он не добавляет тени вправо и влево. Только навигационное меню вниз требует падения. Это связано с тем, что заголовок установлен на пользовательскую ширину и выходит за пределы #container. Тень влево и вправо от вещи, которая уже выскакивает, разрушит эстетику.

Для лучшей визуализации мой сайт похож на http://www.doubleyourdating.com/, но элемент заголовка выскакивает с обеих сторон.

Я попытался добавить тень влево и вправо от #container, из меню навигации вниз со следующими решениями:

• I Photoshopped 1px high, 1010px wide image, который содержит 25px "fade" на противоположных концах. я CSS'd, что в качестве #container div background-image, но, возможно, потому, что сам #container установлен на ширину 960 пикселей, расширенный фон 1010px не может отображаться. Обратите внимание, что изменение ширины 960px приведет к созданию каскада смерти в этом простом макете с двумя столбцами.

• Я попробовал CSS-расширение временного теневого окна div "вокруг" контейнера div, но это не работает, потому что мой заголовок имеет пользовательскую ширину, которая простирается шире, чем контейнер.

Как мне сделать эту работу?