Q:

Two divs with 50% width while content inside container

How to accomplish the look like it is in the image?

It is just regular Bootstrap code for columns, but first two columns should be on white background inside .container, while the other two columns on black background and that black background is going right all the way to the end. 
CodePen
<div class="container">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>

A:

use linear-gradient in body , giving your .container is the parent, and you won't have any wrapper around .container

Sorry that I'm bothering you, but what I meant was to place the image
  like this
  image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

Add another parent div (being child of body) and add background-image to that div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>

