Ошибочная тема

Здравствуйте уважаемые специалисты. Помогите пожалуйста решить проблему.

Требуется создать заблон с фото в виде 1изображения. Нужно что-бы изображение не повторялось.
background-size:100% растягивает только по ширине. Если поставить background-size:100% 100% то и так и так тянет, но тогда уже качество изображения никакое.

Как решение вижу возможность разделить фон на 3 части. Верх центр и низ. И так же нужно что-бы верх и низ были атрибутом background-size:100% а середина просто цветом. Фото позволяет такое.

Но есть проблемы с реализацие такой возможности. Хедер и футер значительно меньше верха и низа картинки. В итоге если это прописать в одном месте не выйдет. Иначе если в верхней части фото прописать хедер а в середину вставить контент то контент будет на большом растоянии от хедера.

У меня появилась мысль а что если взять 3 части фона заключить в отдельный хтмл файл и сделать его фоном всего. Но я не знаю как это реализовать и как заставить тянуться на весь экран все 3 части. Что-бы верх и низ по ширине а середина и по ширине и по высоте.

Помогите пожалуйста решить эту проблему. Очень уж застрял.