То, что вам нужно, это сделать фоновые изображения фактически фоновыми изображениями, тогда это будет работать.
Итак, сначала вам нужно добавить некоторые элементы, чтобы иметь фоновые изображения, например:
<body>
<div class="wrapper background-foo">
<!-- your content div -->
</div>
</body>
Вам понадобится один фоновый div на изображение, и div должен быть полной ширины, чтобы фоновое изображение могло быть где угодно.Используйте background-position, чтобы расставить свои фоны.
Один трюк, который может быть полезен, если вы хотите, чтобы изображение находилось справа от центра, и торчало в сторону, вы можете подделать его так:
.background-ffo { background: url(...) no-repeat 400px center; }
, а затем фоновое изображение будет выглядеть так:
+-----------------------------------------+
| .background-foo |
| |
| |
| |
| |
| |
| |
+------------------------------------------------------------+
| | ################### |
| | background image ################### |
| | ################### |
| | ################### |
| | ################### |
+------------------------------------------------------------+
| | ^^ the bit of background
| | you care about
| |
+-----------------------------------------+
Так как это фон, и ваш div background-foo по-прежнему помещается на странице, как и ваш контент,не будет горизонтальных полос прокрутки.