[FIXED] How to display a portion of an image with CSS?

Issue

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.

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.

I'm using this as background in an div at the moment.

div.banner {
    content: url('../Images/banner.jpg');
    background-color: #A5B7C7;
}​

<div class="banner"></div>

Solution

This can simply be achieved by setting background-position: center bottom;. If your container is now smaller than your background image, it just gets hidden on the top because it's aligned to the bottom.

In this example the background images height is 400px, but the containers height is only 300px:

.banner {
  background: url('https://place-hold.it/300x400');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

<div class="banner"></div>

Answered By - andreas

Answer Checked By - Gilberto Lyons (PHPFixing Admin)