Корректное масштабирование фоновых изображений при адаптивной вёрстке

[Enkoiu]

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

Задача какая: сделать масштабируемую таблицу из div с фоном-книгой.

Чтобы масштабы не ездили туда-сюда при изменении размеров контента (был вариант сделать фон одной картинкой, но меняются масштабы, плюс для народа с медленным интернетом это издевательство, согласитесь).

 

При уменьшении родительского окна фон в некоторых блоках начинает обрезаться или некорректно масштабируется. Что я делаю не так и почему он так себя ведёт?( Пример можно увидеть на сайте, сделан на скорую руку, чтобы показать проблему. Выписать затем стильки в общий css не проблема, но пока что - особо как бы нечего. Вообще реально такое сделать без скриптов?(

С уважением, Enkoiu.

[Igor Schnaider]

Как-нибудь так.

 

(Я на скорую руку набросал пример, там стыки кое-где могут коряво быть, не обращайте внимание.)

 

Я сам люблю такой способ, он простой. Недостаток в том, что если высота контента превысит размер картинки, то будет некрасиво :-) Как вариант, можно добавить промежуточный блок посередине, и так как фон "линейный" - растянуть его по высоте. А верхним и нижним этажам поставить высоту не 50%, а сколько там нужно для них.

[SelenIT]

А border-image не вариант?