Вопросы макета, часть фиксированной ширины, часть эластичной

Question

Я уже просмотрел несколько постов и не смог найти то, что мне было нужно. Я сейчас что-то проектирую в PS и могу предвидеть проблему, когда дело касается кодирования дизайна в html + css.

Вообразите мой центр div, это 960px. Он будет иметь полупрозрачный .png в качестве фона. Дизайн “full width”, поэтому этот div будет содержаться в большем div, установленном на 100% ширины. Это все нормально, пока я не доберусь до фона на этом внешнем div. Он также будет иметь .png, работающий на всю ширину страницы. Проблема в том, что я не хочу, чтобы он проходил через середину, так как это приведет к тому, что середина будет иметь двойную толщину, если это имеет смысл ?!

По сути, мне нужен способ запустить div с любой стороны, которая будет эластичной, или каким-то образом не дать фону пересечь центральную 960px часть окна браузера.

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

Есть идеи?

Хорошо, я попытался найти основную проблему здесь: http://jsfiddle.net/8Bznc/1/

Answer 1

Вы можете просто поместить непрозрачный фон в центр div, чтобы другой фон не просвечивал.

Смотрите здесь: http://jsfiddle.net/9bnHD/

Answer 2

Применить background-image только к упаковке div.

В качестве альтернативы, если центр и стороны должны иметь разные изображения, укажите для центра div также непрозрачный background-color.

Кроме того, вы можете подделать его, используя несколько background-images. Демо

Имейте в виду, что это не будет работать в старых версиях IE, но что-то столь же несущественное, как прозрачность фона, может быть исключено как постепенное ухудшение.