3

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>
andreas
  • 16,357
  • 12
  • 72
  • 76
Caverman
  • 3,371
  • 9
  • 59
  • 115
  • If you're setting the image as a `background-image`, have you tried using the `background-size` css property as a percentage to scale the image up, cropping it? – Jonathan Bowman Oct 26 '16 at 18:06

3 Answers3

5

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>
andreas
  • 16,357
  • 12
  • 72
  • 76
1

You can achieve this by using clip property, for this you need to keep position either absolute or fixed http://www.w3schools.com/cssref/pr_pos_clip.asp

Here an example with your image: http://jsfiddle.net/2U3CE/1/

    img{
        position:absolute;
        clip:rect(0,73px,73px,0);
       }
Sandeep Garg
  • 19
  • 4
-1

U can adjust by background-position to get a part of image u want.

Manickus
  • 5
  • 6