to show part of an image

[zozzen]

Hi,

CSS can help display only a part of image. With the CSS below, I can only display the upper part of an image, but how can I display only the lower part of the image?

<style>
#display_only_a_part{ 
overflow: hidden;
background:none repeat scroll 0 0;
width: 400px;
height: 180px; 
position: relative;
margin-left:auto;
margin-right:auto;
padding-top:auto;
}
</style>

It's easier to see a pic rather than description. Please take a look on the picture. (Starring: Bill)
[i52.tinypic.com ]

Any advice is appreciated!

[alt131]

Hi zozzen,

An easy way is to apply a background image to a block element:

#display_only_a_part {
/*styles for demonstration */
margin:0 auto;
color:#fff;
font-size:2em;
border:1px solid red;
/*image set-up - adjust the height and width of the container, and the position of the image to suit*/
width:450px;
height:100px;
background: transparent url(my_image.jpg) center -200px no-repeat;
}

<p id="display_only_a_part">Actual image is 450 x 300, but this shows the full width (center) and the lower 100px (-200px)</p>

This uses the (background) shorthand, but you can read more about using and positioning background-images in the recommendation:
[w3.org ]