How to make this block (header)?

Question

css

I don’t understand how to arrange 2 images divided in half and so that the navigation does not fall when resizing and the background itself, this whole thing should be adaptive, sorry for the poorly formulated question, I’m in a panic)

Answer 1

First option :
Place all graphics on the background of the main div and center via background-position, leave the rest of the blocks transparent and position relative to the center. The main block contains a wrapper block with the position: relative style.

{ position: relative;
  width: 500px; /*  */
}

Block with menu and phones:

{ position: absolute;
  left: 50%; /*Находим центр*/
  margin-left: 100px; /*Слегка смещаем, (он же не с центра начинается)*/
}

Assortment block:

{ position: absolute;
  width: 50; /* правая часть явно по центру */
  top: 50%; /* верхняя часть тоже от центра */
}

Adaptation :
On small monitors, remove to replace with a picture without the right side and line everything up vertically.
Second option :
Use transform

{ transform: skewX(45deg);
}

More details at the link: https://jsfiddle.net/3cfuxkf2/
If something is not clear, I will explain.
Adaptation : similar to the previous version.
PS: The main thing is "Calm, only calm"