How do I make an image start at the bottom of it's container?

Question

I have a tall image inside a short container with overflow: hidden;. The bottom of the image is cut off. How do I make the top get cut off instead of the bottom?

Answer 1

If your image is just the background-image of the container, do this way:

#container {
    background: url(your-image.jpg) no-repeat bottom left;
}

Otherwise, position the img element to the bottom of the container, like @Joseph suggested:

#container {
    position:relative;
}

#container img {
    position: absolute;
    bottom: 0px;
}

Answer 2

give the container the following css:

position:relative;

and the image the following css:

position:absolute;
bottom:0px;

P.S.
Very nice (and clear) illustrations btw