Фоновое изображение слишком мало на мобильных устройствах. Как исправить?

Question

У меня есть div, который установлен на ширину 100%, с фоновым изображением (на фото ниже, фоновое изображение - это рука, держащая устройство), поэтому изменение размера окна также изменит размер фонового изображения. Я сделал это с целью постоянно растягивать его по всему экрану, независимо от того, какое устройство вы использовали.

Это работает отлично, пока я запустить сайт на мобильном телефоне. Экран телефона слишком мал по горизонтали и сжимает фоновое изображение до такой степени, что 3 информационных блока в нижней части экрана кажутся оттолкнутыми, но его только фоновое изображение, которое было снято:

Кто-нибудь знает, как я мог бы обойти эту проблему? Должен ли я найти способ расположить div-инфобокс таким образом, чтобы заставить их двигаться вверх, когда экран меньше?

Любые советы будут оценены.

Answer 1

Он пытается держать это пропорция, вы можете установить высоту до 100%, и пусть это испортит пропорцию или просто исчезать из нижней части изображения, так что, как представляется, сливаться.

Answer 2

Вы можете использовать другое фоновое изображение для разных платформ, для обратной совместимости, иначе используйте CSS3 background-size. См. http://www.w3schools.com/cssref/css3_pr_background-size.asp.