title: Quite difficult positioning of midcontent in a fullwidth image
body: <p><img src="https://i.stack.imgur.com/r09N1.jpg" alt="enter image description here"></p>
  
  <p>So, i have the following design. I'm unsure on how to solve this design. I have the following thoughts on it:</p>
  
  <p>The people in the back can be a static image if i want it to be. I do have a CMS system, which my customer can use to upload the images if anyone of you shows me an example where i need the peopleimages to be added one by one.</p>
  
  <p>My first thought was to include the red part in the background image, however, this makes both the people and the red part quite poor quality on big screens(1920>). The text should be retrieved from my CMS system and positioned like it is on the image.</p>
  
  <ol>
  <li>As you may see, the red boxes are the same width as the peoplepictures. This means percent width will be hard if they are 2 different images.</li>
  <li>The images of people should fit the whole browser screen. I don't care if some people fall out of the picture. The image shows that some people are already outside(the image is made that way).</li>
  <li>The content should have a parallax effect, but is not absolutely necessary.</li>
  </ol>
  
  <p>My second thought was to make the peoplespictures one by one, and use isotopes for good positioning. But, that will make it hard to fit the whole browser-screen. If one bottom row goes to the right, it wont be full height anymore.</p>
  
  <p>If i use the red part as one image, and use the whole peoplepicture as one, i could use maximage on the peoplepicture. Then i could position the red part with percentage. But then again, that will make it very hard(i think) to actually have the same width on the red boxes as one personbox. It would however be easier to place the text, then if its one big image(including the red part).</p>
  
  <p>Any suggestions, examples, tips etc? Any help will help!</p>
  
  <p>Will bootstrap help me?</p>