title: Crop the image when containing block has min width
body: <p>So I have this part of PSD template, which looks like that:
  <img src="https://i.stack.imgur.com/PtQ0h.jpg" alt="Normal width"></p>
  
  <p>But when I reduce browser's width to 1200px the upper image (.image-1) keep falling off:
  <img src="https://i.stack.imgur.com/GUgOx.jpg" alt="Min-width 1200px"></p>
  
  <p>How can I crop the image on the right when width is 1200px or less?
  Here is CSS </p>
  
  <pre><code>#blog {
      width: 100%;
      height: 667px;
      min-width: 1200px;
      background: url(../images/blog-background.png) top center no-repeat #f6f4f4;
  }
  
  #blog .container {
      width: 1136px;
      height: 667px;
      margin: 0 auto;
      position: relative;
  }
  
  #blog .container .image-1 {
      width: 806px;
      height: 570px;
      background-image: url(../images/image-1.png) ;
      position: absolute;
      top: -37px;
      left: 545px;
  }
  </code></pre>