title: CSS - Position image to the left + partly cut-off + responsive + Bootstrap
body: <p><img src="https://i.stack.imgur.com/rxhvf.png" alt="example"></p>
  
  <p>Trying to accomplish the above with Bootstrap.  Ie. an image, that's partly cut-off to the left, that resizes with the window, and stays in the left column.</p>
  
  <p>Given the following HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;img src="img.png" class="hero-img"&gt;
          &lt;/div&gt;
  
          &lt;div class="col-xs-6"&gt;
              Lorem ipsum
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried the following CSS:</p>
  
  <pre><code>.hero-img {
      position: fixed;
      left: -150px;
  }
  </code></pre>
  
  <p>However, as the screen gets resized, the image bleeds into the right column.  </p>