title: How to display a portion of an image with CSS?
body: <p>I have an image to be used as a banner that is 1400x350 and I would like do display maybe 80% of it's height. I'm not looking to scale the image, I need to display only a portion of it. Imagine a picture of car and I want to display from the just above the tires up. </p>
  
  <p>Everything I've found shows how to scale or resize the image but that still shows 100% of the original image. I'm only looking to display a portion of the original image. I can manually crop the image in an image editor but I'm hoping to be able to do this with CSS.</p>
  
  <p>I'm using this as background in an div at the moment. </p>
  
  <pre><code>div.banner {
      content: url('../Images/banner.jpg');
      background-color: #A5B7C7;
  }​
  
  &lt;div class="banner"&gt;&lt;/div&gt;
  </code></pre>