How Would I Duplicate The Placement In This Image?

I'm trying to build this view and I'm having trouble placing the circle and car images on that path(line). I have individual files for each part of the car path image. There are al

Solution 1:

Because we do not have the wavy line as a mathematical formula but contained within a png, and with wide margins above and below the line, we'll have to use measurement, and hence fractions, to work out where in relation to the line png the car and circles are to be placed.

This snippet makes all four pngs into the background of the element below the heading. In this way the two columns can be placed at the same distance left as the two circles (i.e. in relation to the width of the content). If these are to change then the calculation of the vertical position of the circles must also change.

The car is placed in the center horizontally and again the vertical position adjusted so it appears on top of the line.

The result is:

It is responsive as everything is calculated in terms of the width of the viewport ultimately.

h1 {
  text-align: center;
}

.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  --h: calc(754 / 1400 * 100vw);
  /* the height of the wavy line image file */--top: calc(var(--h) * -0.45);
  /* the position of the top of the wavy line image */background-image: url(https://i.stack.imgur.com/rbWbW.png), url(https://i.stack.imgur.com/9DQ8A.png), url(https://i.stack.imgur.com/qKOxp.png), url(https://i.stack.imgur.com/fQ3el.png);
  background-repeat: no-repeat no-repeat;
  background-size: 10% auto, 1% auto, 1% auto, 100% auto;
  background-position: 50%calc(var(--top) + (0.48 * var(--h))), 12%calc(var(--top) + (0.56 * var(--h))), 62%calc(var(--top) + (0.475 * var(--h))), 0var(--top);
}

.col1 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.7 * var(--h)));
  left: 12%;
  margin: 0;
  padding: 0;
}

.col2 {
  width: 35%;
  position: absolute;
  top: calc(var(--top) + (0.6 * var(--h)));
  left: 62%;
  margin: 0;
  padding: 0;
}

<h1>Our Services</h1><divclass="content"><divclass="col1">content of column 1</div><divclass="col2">content of column2</div></div>