How is such a background made up?

Question

css

https://dribbble.com/shots/4276228-Camera-dron-lan...
And how do they make up such a background? A round background that goes into the header and stuff. Well, i.e. I understand that you can just make the header transparent), but how is the quadrocopter superimposed on it? z-index? And in general, maybe something has already appeared so as not to put bold pictures as a background?

Answer 1

And in general, maybe something has already appeared so as not to put bold pictures as a background?

Yes, it's called SVG. There, only the quadcopter itself is most likely bold, and circles with gradients can be made in a vector - they won’t take anything at all.
You can approach the issue in different ways. As an option, there are three layers:
1. Left content, it has a background in the form of a left circle (so as not to worry about its size on different screen sizes - after all, there, in theory, the content should fit in a circle). The main thing here is to carefully arrange everything and do not forget about critical css.
2. Copter (because it is bold, it can be loaded asynchronously and pushed out using CSS animation from behind the right edge of the screen - it will be both beautiful and productive; I would add some other effect to the text, but that's another story). Its size should apparently depend on the width of the screen and the size of the content on the left. It is necessary to figure out in advance how it all should adapt.
3. The menu, which is at the top right, it should be on top of the copter (again, the question is about adaptability).
4*. The background, which is the largest background, can simply be put on the background of the header. Since it is in a vector, it can be made much higher than in the picture, so that again, you don’t have to worry that it will come out of the rounding at the bottom of the section on the phone. This rounding itself can be done in a thousand ways, the toaster has already been asked more than once.
This approach takes more time than just putting everything in the background of one element, but the result will be on a slightly different level.

Answer 2

In background, it is possible to set several background images at once. In your example, I think it would be better to do this: circles in svg, quadrocopter, respectively, as a picture. There is another feature of the background property, the "later" the background is set, the lower it will be.
https://codepen.io/anon/pen/EEOrqe