Как верстать фон для разных устройств?

Прежде всего - в этом деле я нуб, буквально посмотрел пару видео-уроков html и css и сел колдовать.
Делаю простой одностраничный сайт с резиновой версткой под разные разрешения. На переднем плане div блоки с контентом. Внизу страницы форма обратной связи. На фоне, по задумке, статичное изображение. Используя свойство background-attachment: fixed и background-image в body мне удается сделать фон фиксированным на десктопных браузерах. Но в мобильных, в частности iPad и iPhone фон скроллируется с содержимым. Долго гуглил, и нашел информацию о том, что это свойство safari не понимает. Пробовал эти рецепты, почти все способы работали как мне нужно, но при скроллинге на айпаде и айфоне время от времени пропадали блоки с содержимым (визуально воспринимается как глюки). В десктопном safari же вообще отображались только два первых блока. То-есть сделать сайт по задумке не получается. Обращаюсь за помощью к вам, надеюсь есть какие-то простые решения, которые я не смог найти сам.
Желаемый результат.
Вот мой сайт и css код. Сейчас там использован последний вариант из руселлера.
Если что-то сделал неправильно, укажите - исправлюсь.