title: Responsive CSS image with fixed and centered background attachment
body: <p>I'm trying to center an image inside it's parent div and have it fixed. I want to give it the collapsing header look (even though it's not really a header) so I'm using <code>background-attachment: fixed;</code> to keep it in place.</p>
  
  <p>The problem with this approach is that when I then go to center the image with <code>background-position: center center;</code> the image is not being centered.</p>
  
  <p>Obviously if I remove the <code>background-attachment: fixed;</code> line of CSS the image is then centered.</p>
  
  <p>Is there any way to <code>background-attachment: fixed;</code> an image and center it?</p>
  
  <pre><code>.aparent {
      min-height:200px;
  }
  #achild {
      background-image: url(https://images.unsplash.com/photo-1442589031151-61d5645469d7?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;w=1080&amp;fit=max&amp;s=86aed4d82f9ab1324e46ae97b4cd98e1);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment:fixed;
  }
  </code></pre>
  
  <p>Pen showing the code - <a href="http://codepen.io/anon/pen/GoBJpR" rel="nofollow">http://codepen.io/anon/pen/GoBJpR</a>
  (remove the <code>background-attachment:fixed;</code> to show how it should look)</p>
  
  <p>Thanks.</p>
  
  <p>Edit: pen broke</p>