How to Display Just a Portion of an Image in Html/Css

How can I display just a portion of an image in HTML/CSS?

One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.

How to display a portion of an image with CSS?

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>

How to show only a portion of an image just by using the img tag?

Final Update--tested IE8+: This solution uses a refinement of Surreal Dreams' idea of using outline for getting the border. This allows a cross browser simplicity compared to the linear-gradient method I was previously going for. It works in IE7, except the outline (unsupported).

Keeping it as an img tag with a src keeps it semantic.

A margin: 1px is applied to give the outline "space" in the layout, since by nature outline takes up no space. The zero height suppresses the main image, and the padding is used create the desired height for the background image (which is set the same as the main image) to show.

HTML

<img class="photo" src="foo.png" style="background-image: url(foo.png)" />

CSS

.photo {
   padding: 64px 0 0 0;
   border: 3px solid #fff;
   outline: 1px solid #000;
   margin: 1px;
   width: 64px;
   height: 0px;
   display: block;
}

Background image display specific portion of the image

Combination of background-size and background-position CSS attributes. Dont forget you can make the background-size value greater than 100%. I would throw this at it and fine tune from there:

.banner{
  background: url(../img/img1.png);
  // background-size takes height and width but shorthand is one value used for both
  background-size: 200%;
  // background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
  background-position: center center;
}

Displaying a portion of a image in a div element

Yes, quite easy, in fact:

.image {
display: block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}

.image img {
position: relative;
left: -100px;
top: -100px;
}

<div class="image">
    <img src="http://img05.deviantart.net/c135/i/2011/134/7/0/bridge_by_kzonedd-d3gcetc.jpg" alt="photo of old wooden bridge" />
</div>

Of course, the minus 100px just to show you how to position. Play around with the values and all will become clear.

HTH. Good luck and have fun.

HTML display bottom left quarter of the image

If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:

.container {  width: 300px;  height: 200px;  overflow: hidden;  position: relative;}
.container img {  position: absolute;  bottom: 0;  left: 0;}

<div class="container">  <img src="http://placehold.it/600x400/fa0" /></div>

Showing only a part of image in div using css

Use position: relative on the parent element and position: absolute on the child images.

#sample {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
}

#sample img {
  position: absolute;
  top: -100px;
  left: -100px;
}

<div id="sample">
  <img src="data:image/jpeg;base64,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"
  />
</div>

How do you only display part of a background is css?

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;

replace with:

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center center;

UPDATE:

at the end of the line change the percentage for vertical align:

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;

as example use this

no-repeat center 35%;

and change 35 to whatever you need.