How to make a background for different devices?

Question

css

First of all, I'm a noob in this business, I literally watched a couple of html and css video tutorials and sat down to conjure.
I am making a simple one-page website with rubber layout for different resolutions. In the foreground div blocks with content. Contact form at the bottom of the page. On the background, as planned, a static image. By using the background-attachment: fixed property and background-image on the body, I can make the background fixed on desktop browsers. But in mobile, in particular iPad and iPhone, the background scrolls with the content. Googled for a long time, and found information that safari does not understand this property. Tried theserecipes, almost all methods worked as I needed, but when scrolling on the iPad and iPhone, blocks with content disappeared from time to time (visually perceived as glitches). In desktop safari, only the first two blocks were displayed at all. That is, it is impossible to make a website as planned. I turn to you for help, I hope there are some simple solutions that I could not find myself.
Desired result .
Here is my website and css code . Now the last option from the Ruseller is used there.
If I did something wrong, point out - I will correct it.

Answer 1

Take courses https://htmlacademy.ru/ . Everything is simple and clear. A couple of video tutorials will do nothing.

Answer 2

1/ tie up with the study of video lessons
2/ habrahabr.ru/post/148639