CSS Background Image Scale to Center?
<p><a href="https://jsfiddle.net/2esv5wja/" rel="nofollow noreferrer">https://jsfiddle.net/2esv5wja/</a></p>

<p>css code snippet:</p>

<pre><code>.imageContainer {
    height: 750px;
    width: 100%;
    overflow: hidden !important;
}

.imageContent{
    background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
    background-size: 100%;
  width: auto;
  height: 100%;
  padding-top: 3%;
    padding-bottom: 3%;
    min-width: 1200px;
    overflow: hidden !important;
}
</code></pre>

<p>Is there a way to make it so when the image stops scaling, it crops to the center? That is, as it stands, it crops from the right. Can we crop from both sides evenly? If so, how is that done?</p>